【记】three.js的一个简单的代码记录
有时间首次尝试了一下three.js，这真是个非常强大的框架，以下就是本人的第一个three.js的"helloworld"。
关于how to get start，总结起来就是以下这几步
- 引入three.js，创建必要的html结构
- 创建渲染器
- 创建相机
- 创建一个场景
- 添加相关的模型
- 渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>HelloWorld</title>
<style>
#view{width:1600px; height:800px;}
</style>
<script src="three.min.js"></script>
</head>
<body onLoad="start();">
<div id="view"></div>
<script>
var view=document.getElementById('view');
var width=view.clientWidth;//宽度
var height=view.clientHeight;//高度
var renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器，带抗锯齿
var camera;//相机
var scene;//场景
var light;//光源
var obj;//物体
function initRenderer(){
renderer.setSize(width,height);//设置宽高
view.appendChild(renderer.domElement);//将渲染器加入到html中
renderer.setClearColorHex(0xffffff,1.0);//设置环境的背景色
}
function initCamera(){
camera=new THREE.PerspectiveCamera(45, width/height,1,5000);
camera.position.x=100;//相机的位置坐标
camera.position.y=0;//相机的位置坐标
camera.position.z=100;//相机的位置坐标
camera.up.x=0;//相机的上方向，该属性是单位向量。相当于一个照相机可以竖着排，也可以横着排
camera.up.y=1;
camera.up.z=0;
camera.lookAt({x:0,y:0,z:0});//相机的朝向，单位向量
}
function initScene(){
scene=new THREE.Scene();//场景
}
function initLight(){
light=new THREE.DirectionalLight(0x0000f0,1.0,0);//光源
light.position.set(200,200,200);
scene.add(light);
}
function initObject(){
obj=new THREE.Mesh(
new THREE.CubeGeometry(20,20,20),
new THREE.MeshLambertMaterial({color:0xfffff0})
);
scene.add(obj);
obj.position.set(0,0,0);
}
var st=0;
function start(){
initRenderer();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene,camera);
animate();
}
function animate(){
var x=Math.cos(Math.PI*st/180)*100;
var y=Math.sin(Math.PI*st/180)*100;
camera.position.x=x;
camera.position.z=y;
camera.lookAt({x:x/100,y:0,z:y/100});
//camera.up.x=x;
//camera.up.z=y;
st++;
renderer.clear();
renderer.render(scene,camera);
console.log(x+"|"+y);
setTimeout(animate,30);
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<title>HelloWorld</title>
<style>
#view{width:1600px; height:800px;}
</style>
<script src="three.min.js"></script>
</head>
<body onLoad="start();">
<div id="view"></div>
<script>
var view=document.getElementById('view');
var width=view.clientWidth;//宽度
var height=view.clientHeight;//高度
var renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器，带抗锯齿
var camera;//相机
var scene;//场景
var light;//光源
var obj;//物体
function initRenderer(){
renderer.setSize(width,height);//设置宽高
view.appendChild(renderer.domElement);//将渲染器加入到html中
renderer.setClearColorHex(0xffffff,1.0);//设置环境的背景色
}
function initCamera(){
camera=new THREE.PerspectiveCamera(45, width/height,1,5000);
camera.position.x=100;//相机的位置坐标
camera.position.y=0;//相机的位置坐标
camera.position.z=100;//相机的位置坐标
camera.up.x=0;//相机的上方向，该属性是单位向量。相当于一个照相机可以竖着排，也可以横着排
camera.up.y=1;
camera.up.z=0;
camera.lookAt({x:0,y:0,z:0});//相机的朝向，单位向量
}
function initScene(){
scene=new THREE.Scene();//场景
}
function initLight(){
light=new THREE.DirectionalLight(0x0000f0,1.0,0);//光源
light.position.set(200,200,200);
scene.add(light);
}
function initObject(){
obj=new THREE.Mesh(
new THREE.CubeGeometry(20,20,20),
new THREE.MeshLambertMaterial({color:0xfffff0})
);
scene.add(obj);
obj.position.set(0,0,0);
}
var st=0;
function start(){
initRenderer();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene,camera);
animate();
}
function animate(){
var x=Math.cos(Math.PI*st/180)*100;
var y=Math.sin(Math.PI*st/180)*100;
camera.position.x=x;
camera.position.z=y;
camera.lookAt({x:x/100,y:0,z:y/100});
//camera.up.x=x;
//camera.up.z=y;
st++;
renderer.clear();
renderer.render(scene,camera);
console.log(x+"|"+y);
setTimeout(animate,30);
}
</script>
</body>
</html>
上述代码我旋转了照相机，实现了一个正方体的旋转。唯一觉得稍微难理解的就是相机的那几个向量所代表的意思。
