Three.js-Three.js用法

浏览数：43 / 时间：2015年06月09日

使用WebGL框架Three.js

Three.js首页:http://threejs.org/

Api:http://threejs.org/docs/

使用Three.js的一般方法:

1.定义渲染器.

2.定义相机.

3.定义场景.

1.定义渲染器(renderer):

1 renderer = new THREE.CanvasRenderer();或
2 
3 renderer = new THREE.WebGLRenderer({antialias:true});//启用抗锯齿
4 
5 renderer.setSize(width,height);
6 
7 document.body.appendChild(renderer.domElement);

2.定义相机

1 camera = new THREE.PerspectiveCamera(75,width/height,1,10000);//透视相机
2 
3 camera.position.z = 300;

3.定义场景

1 scene = new THREE.Scene();

整体模版:

 1 var renderer,camera,scene;
 2 
 3 function init(){
 4 
 5 var width = window.innerWidth;
 6 
 7 var height = window.innerHeight;
 8 
 9  renderer = new THREE.CanvasRenderer();
10 
11  renderer.setSize(width,height);
12 
13  document.body.appendChild(renderer.domElement);
14 
15 camera = new THREE.PerspectiveCamera(75,width/height,1,10000);
16 
17 camera.position.z = 300;
18 
19 scene = new THREE.Scene();
20 
21 }
22 
23 function animation(){
24 
25 requestAnimationFrame(animation);
26 
27 render();
28 
29 }
30 
31 function render(){
32 
33     Renderer.render(scene.camera);
34 
35 }
36 
37 init();
38 
39 animation();