《Three.js學習筆記02》場景中新增網格物件
阿新 • • 發佈：2019-02-14
<!DOCTYPE html>
<html>
<head>
<title> First Scene</title>
<script type="text/javascript" src="../assets/three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
<script type="text/javascript">
function init() {
//建立場景
var scene = new THREE.Scene();
//建立相機
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 相機位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
//建立渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE,1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
//建立輔助線
var axes = new THREE.AxesHelper(20);
scene.add(axes);
// 建立平面
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 平面位置
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
// 加入到場景
scene.add(plane);
// 建立立方體
<html>
<head>
<title> First Scene</title>
<script type="text/javascript" src="../assets/three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
<script type="text/javascript">
function init() {
//建立場景
var scene = new THREE.Scene();
//建立相機
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 相機位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
//建立渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE,1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
//建立輔助線
var axes = new THREE.AxesHelper(20);
scene.add(axes);
// 建立平面
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 平面位置
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
// 加入到場景
scene.add(plane);
// 建立立方體