1+ <!DOCTYPE html>
2+
3+ < html >
4+ < head >
5+ < meta charset ="utf-8 " />
6+ < title > 物体组合及辅助坐标系 - iThreeJS</ title >
7+ < style type ="text/css ">
8+ * margin : 0 ;padding : 0 ;}
9+ html , body {overflow : hidden;}
10+ </ style >
11+ </ head >
12+
13+ < body >
14+
15+ < script type ="text/javascript " src ="../assets/js/three.min.js "> </ script >
16+ < script type ="text/javascript ">
17+ //全局变量
18+ const w = window . innerWidth ;
19+ const h = window . innerHeight ;
20+ const r = w / h ;
21+ const s = 300 ;
22+
23+ //场景
24+ let scene = new THREE . Scene ( ) ;
25+
26+ //物体
27+ let cubeGeo = new THREE . BoxGeometry ( 100 , 100 , 100 ) ;
28+ let cubeMtl = new THREE . MeshBasicMaterial ( {
29+ color : 0x00ffff ,
30+ wireframe : true
31+ } ) ;
32+ let cube = new THREE . Mesh ( cubeGeo , cubeMtl ) ;
33+
34+ let ballGeo = new THREE . SphereGeometry ( 80 , 6 , 6 ) ;
35+ let ballMtl = new THREE . MeshBasicMaterial ( {
36+ color : 0xffff00 ,
37+ wireframe : true
38+ } ) ;
39+ let ball = new THREE . Mesh ( ballGeo , ballMtl ) ;
40+
41+ //设置物体中心点位置
42+ cube . position . set ( 300 , 0 , 0 ) ;
43+ ball . position . set ( 0 , 0 , 300 ) ;
44+
45+ //物体组合
46+ let group = new THREE . Group ( ) ;
47+ group . add ( cube ) ;
48+ group . add ( ball ) ;
49+
50+ scene . add ( group ) ;
51+
52+ //光照
53+ let aLight = new THREE . AmbientLight ( 0x404040 ) ; //创建环境光
54+ scene . add ( aLight ) ; //把环境光添加到场景中
55+
56+ //辅助坐标系
57+ let aHelper = new THREE . AxesHelper ( 300 ) ;
58+ scene . add ( aHelper ) ;
59+
60+ //照相机
61+ let camera = new THREE . OrthographicCamera ( - s * r , s * r , s , - s , 1 , 1000 ) ;
62+ camera . position . set ( 300 , 200 , 300 ) ;
63+ camera . lookAt ( scene . position ) ;
64+
65+ // let camera = new THREE.PerspectiveCamera(75, r, 1, 1000);
66+ // camera.position.set(400, 300, 400);
67+ // camera.lookAt(scene.position);
68+
69+ //渲染器
70+ let renderer = new THREE . WebGLRenderer ( ) ;
71+ renderer . setSize ( w , h ) ;
72+ document . body . appendChild ( renderer . domElement ) ;
73+
74+ //执行渲染
75+ function render ( ) {
76+ renderer . render ( scene , camera ) ;
77+
78+ cube . rotation . y += 0.01 ;
79+ ball . rotation . y += 0.01 ;
80+
81+ requestAnimationFrame ( render ) ;
82+ }
83+ render ( ) ;
84+ </ script >
85+ </ body >
86+ </ html >
0 commit comments