<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div id="canvas-frame"></div>
<script src="../static/three.js-master/build/three.js"></script>
<script>
var renderer; // 渲染器, 聲明變量
function initThree() {
renderer = new THREE.WebGLRenderer(); // 創建一個渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 設置寬度高度
document.getElementById('canvas-frame').appendChild(renderer.domElement); //添加到畫布canvas-frame里面
renderer.setClearColor(0xFFFFFF, 1.0); // 設置背景色和透明度
}
var camera; // 攝像機
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500); // 創建一個透視攝像機
camera.position.set(0, 500, 0); // 設置攝像機坐標
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.lookAt(0, 0, 0);
}
var scene; // 場景
function initScene() {
scene = new THREE.Scene(); // 創建場景
}
var light;
function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); // THREE.DirectionalLight平行光可以看作距離很遠的光
light.position.set(100, 100, 200); // 坐標
scene.add(light); // 添加到場景中
}
function initObject() {
var geometry = new THREE.Geometry(); // geometry為三維空間中的點集同點集閉合后的各個面的集合
// 在x軸上定義兩個點p1(-500,0,0)，p2(500,0,0)。
geometry.vertices.push(new THREE.Vector3(-200, 0, 0));
geometry.vertices.push(new THREE.Vector3(200, 0, 0));
// 思路：我們要畫一個網格的坐標，那么我們就應該找到線的點。把網格虛擬成正方形，在正方形邊界上找到幾個等分點，用這些點兩兩連接，就能夠畫出整個網格來。
for (var i = 0; i <= 8; i++) {
// 這兩個點決定了x軸上的一條線段，將這條線段復制20次，分別平行移動到z軸的不同位置，就能夠形成一組平行的線段。
// 同理，將p1p2這條線先圍繞y軸旋轉90度，然后再復制20份，平行於z軸移動到不同的位置，也能形成一組平行線。
// 經過上面的步驟，就能夠得到坐標網格了。
var linex = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
linex.position.z = (i * 50) - 200;
scene.add(linex);
var liney = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2}));
liney.position.x = (i * 50) - 200;
liney.rotation.y = 90 * Math.PI / 180; // 將線旋轉90度
scene.add(liney);
}
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
threeStart();
</script>
</body>
</html>
附帶three.js代碼，點擊下載
