Threejs的三大组件是场景，相机和渲染器。
初学Threejs，完成了第一个样例，效果如下：
1-1
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>2-1</title>
<script src="three.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor('#FFFFFF');
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color:0x00ff00});
var cube = new THREE.Mesh(geometry,material);
scene.add(cube);
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene,camera);
}
render();
</script>
</body>
</html>
1.相机
在Threejs中相机分为透视相机和正投影相机。
透视相机：离视点近的物体大，离视点远的物体小。
正投影相机：远处的和近处的是一样大。
透视相机： function PerspectiveCamera( fov, aspect, near, far )，fov是看到的角度，aspect是实际窗口的纵横比，既宽度除以高度，near是视点到近平面中心的距离，far是视点到远平面的距离，相机只能看到near和far中间的东西。
声明一个相机，视角为75度，纵横比为windows的纵横比，可以看到0.1-1000距离中间的物体
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
设置相机的位置，默认将相机放在了原点(0, 0, 0)并且视锥的范围是 -zNear 到 -zFar。
camera.position.z = 5; //此时不改变相机的位置，看不到正方体
2.场景
场景的创建：
var scene = new THREE.Scene();
向场景中添加立方体：
scene.add(cube);
3.渲染器
var renderer = new THREE.WebGLRenderer(); //渲染器的创建
renderer.setClearColor('#FFFFFF'); //设置渲染器的背景颜色，默认是黑色
renderer.setSize(window.innerWidth,window.innerHeight); //设置渲染器的大小
document.body.appendChild(renderer.domElement); //将渲染的物体画在domElement上面，然后挂到body下面
最后调用渲染器进行渲染：
renderer.render(scene, camera);
渲染函数的原型如下：
render( scene, camera, renderTarget, forceClear )
各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
4.立方体的创建
var geometry = new THREE.CubeGeometry(1,1,1); //设置立方体的长宽高
var material = new THREE.MeshBasicMaterial({color:0x00ff00}); //正方体的材质和颜色
var cube = new THREE.Mesh(geometry,material); //通过材质和长宽高创建一个立方体
5.渲染循环
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene,camera);
}
requestAnimationFrame(render);让浏览器下一帧执行render函数，通过立方体的旋转来达到立方体不停旋转的效果。
网友评论