<!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;
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代码，点击下载
