Three.js-Three.js用法

使用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();

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。