第一课 定义一个可复用的面向对象的Three.js三维绘图框架

时间：2022-04-20 06:10:44

在参考为他人的Three.js的学习笔记，现在摘录如下（javascript部分）：

 1 var three3DObject={
 2     scene:null,        // 场景
 3     camera:null,       // 相机
 4     renderer:null,     // 渲染器
 5     controls: null,    // 控制器
 6     container:null,    // 场景容器
 7     stats:null,        // 统计控件
 8     init:function(){
 9         // 初始化
10         var SCREEN_WIDTH=window.innerWidth,SCREEN_HEIGHT=window.innerHeight;
11         // 创建一个场景
12         this.scene = new THREE.Scene();
13 
14         // 创建一个投影相机
15         this.camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH/SCREEN_HEIGHT, 0.1, 1000);
16         this.camera.position.set(0,0,5);
17 
18         // 创建一个渲染器
19         this.renderer = new THREE.WebGLRenderer();
20         this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
21 
22         // 准备容器
23         this.container=document.getElementById('display');
24         this.container.appendChild(this.renderer.domElement);
25         document.body.appendChild(this.container);
26 
27         // 创建一个控制器
28         this.controls=new THREE.OrbitControls(this.camera);
29 
30         // 准备统计
31         this.stats = new Stats();
32         this.stats.domElement.style.position = 'absolute';
33         this.stats.domElement.style.bottom = '10px';
34         this.stats.domElement.style.zIndex = 10;
35         this.container.appendChild( this.stats.domElement );
36 
37         // 创建需要绘制的3D几何模型和像素模型
38         var geometry = new THREE.CubeGeometry(1,1,1);
39         var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
40         var cube = new THREE.Mesh(geometry, material);
41         this.scene.add(cube);
42     }
43 };
44 // 渲染
45 function render(){
46     if(three3DObject.renderer){
47         three3DObject.renderer.render(three3DObject.scene,three3DObject.camera);
48     }
49 }
50 // 使模型动画化
51 function animate(){
52     requestAnimationFrame(animate);
53     render();
54     update();
55 }
56 // 状态更新
57 function update(){
58     three3DObject.controls.addEventListener('change',render());
59     three3DObject.stats.update();
60 }
61 // 载入Three3D数据
62 function initialize3DObject(){
63     three3DObject.init();
64     animate();
65 }
66 
67 // 多浏览器兼容处理
68 if (window.addEventListener){
69     window.addEventListener('load', initialize3DObject, false);
70 }
71 else if (window.attachEvent){
72     window.attachEvent('onload', initialize3DObject);
73 }
74 else{
75     window.onload = initialize3DObject();
76 }

这是一个可复用的面向对象的一个Three.js三维绘图框架，模型数据处理和像素数据处理均在three3DObject.init()方法里面处理。

参考文章：http://www.tuicool.com/articles/uAVNV3

标签：

相关文章