<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="../static/three.js-master/build/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
<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, 10000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 1000;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0, 0, 0);
}
var scene; // 場景
function initScene() {
scene = new THREE.Scene();
}
var light; // 光線
function initLight() {
light = new THREE.AmbientLight(0xFF0000); // 創建環境光源，不產生陰影
light.position.set(100, 100, 200);
scene.add(light);
light = new THREE.PointLight(0x00FF00); // 創建點光源
light.position.set(0, 0, 300);
scene.add(light);
}
var mesh; // 創建模型
function initObject() {
var geometry = new THREE.CylinderGeometry(100, 150, 400); // THREE.CylinderGeometry構造圓柱體
var material = new THREE.MeshLambertMaterial({color: 0xFFFFFF}); //THREE.MeshLambertMaterial高級材質，構造類似木頭、石頭等不光滑的表面
mesh = new THREE.Mesh(geometry, material); // 網狀 Mesh的構造函數是這樣的：Mesh( geometry, material ) geometry是它的形狀，material是它的材質
mesh.position = new THREE.Vector3(0, 0, 0);
scene.add(mesh);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
}
function animation() {
mesh.position.x += 1; // mesh就是指的物體，它有一個位置屬性position，這個position是一個THREE.Vector3類型變量，所以你要把它向左移動，只需要將x的值不斷的減少就可以了。這里我們減去的是1個單位。
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
</script>
</body>
</html>
移動物體與移動攝像機的唯一區別是
mesh.position.x += 1;
附帶three.js代碼，點擊下載
