three.Js: Screen size change

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-moible-web-app-capable" content="yes">
    <meta name="apple-moible-web-app-status-bar-style" content="black">
    <title>Example 01.06 - Screen size change</title>
    <meta content=" Three.js r95" name="keywords">
    <meta content=" Three.js r95" name="description">
    <meta name="author" content="Geovin Du">
    <meta itemprop="name" content="Car Visualizer">
    <meta itemprop="image" content="shareImageCarVisualizer.jpg">
    <meta itemprop="description" content="Customize your car, explore it from all the angles, choose the color you want and fit the rims to your design! You can choose from the models we already did or suggest us what you would like to see and we will make it for you! Made by Plus360Degrees. This project is not for commercial purposes.">
    <meta property="og:image" content="shareImageCarVisualizer.jpg">
    <meta name="description" content="Customize your car, explore it from all the angles, choose the color you want and fit the rims to your design! You can choose from the models we already did or suggest us what you would like to see and we will make it for you! Made by Plus360Degrees. This project is not for commercial purposes." />
    <meta property="og:type" content="website">
    <meta property="og:title" content="Car Visualizer" />
    <meta property="og:image" content="shareImageCarVisualizer.jpg" />
    <meta property="og:url" content="http://threejs.org/" />
    <meta property="og:description" content="Customize your car, explore it from all the angles, choose the color you want and fit the rims to your design! You can choose from the models we already did or suggest us what you would like to see and we will make it for you! Made by Plus360Degrees. This project is not for commercial purposes." />
    <!-- For Chrome for Android: -->
    <link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
    <!-- For iPhone 6 Plus with @3× display: -->
    <link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
    <!-- For iPad with @2× display running iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
    <!-- For iPad with @2× display running iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
    <!-- For iPhone with @2× display running iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
    <!-- For iPhone with @2× display running iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
    <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
    <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->
    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" type="image/gif" />
    <script type="text/javascript" charset="UTF-8" src="../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" src="../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../libs/util/dat.gui.js"></script>
 
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript">
        function init() {
 
            // listen to the resize events  监听窗体大小事件
            window.addEventListener('resize', onResize, false);
 
            var camera;//摄像机
            var scene;//场景
            var renderer; //渲染
 
            // initialize stats
            var stats = initStats();
 
 
            // create a scene, that will hold all our elements such as objects, cameras and lights.
            scene = new THREE.Scene();
 
            // create a camera, which defines where we're looking at.
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 
 
 
            // create a render and set the size
            renderer = new THREE.WebGLRenderer();
 
            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
 
            // initialize the trackball controls and the clock which is needed
            var trackballControls = initTrackballControls(camera, renderer);
            var clock = new THREE.Clock();
 
 
            // create the ground plane
            var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
            var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true;
 
            // rotate and position the plane
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 15;
            plane.position.y = 0;
            plane.position.z = 0;
 
            // add the plane to the scene
            scene.add(plane);
 
            // create a cube
            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
            var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.castShadow = true;
 
            // position the cube
            cube.position.x = -4;
            cube.position.y = 3;
            cube.position.z = 0;
 
            // add the cube to the scene
            scene.add(cube);
 
            var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
            var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff });
            var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
 
            // position the sphere
            sphere.position.x = 20;
            sphere.position.y = 0;
            sphere.position.z = 2;
            sphere.castShadow = true;
 
            // add the sphere to the scene
            scene.add(sphere);
 
            // position and point the camera to the center of the scene
            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position);
 
            // add subtle ambient lighting
            var ambienLight = new THREE.AmbientLight(0x353535);
            scene.add(ambienLight);
 
            // add spotlight for the shadows
            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-10, 20, -5);
            spotLight.castShadow = true;
            scene.add(spotLight);
 
            // add the output of the renderer to the html element
            document.getElementById("webgl-output").appendChild(renderer.domElement);
 
            // call the render function
            var step = 0;
 
            var controls = new function () {
                this.rotationSpeed = 0.02;
                this.bouncingSpeed = 0.03;
            };
 
            var gui = new dat.GUI();
            gui.add(controls, 'rotationSpeed', 0, 0.5);
            gui.add(controls, 'bouncingSpeed', 0, 0.5);
 
 
            // attach them here, since appendChild needs to be called first  可以旋转场景
            var trackballControls = initTrackballControls(camera, renderer);
            var clock = new THREE.Clock();
 
 
            render();
 
            function render() {
 
                // update the stats and the controls
                trackballControls.update(clock.getDelta());
                stats.update();
 
                // rotate the cube around its axes
                cube.rotation.x += controls.rotationSpeed;
                cube.rotation.y += controls.rotationSpeed;
                cube.rotation.z += controls.rotationSpeed;
 
                // bounce the sphere up and down
                step += controls.bouncingSpeed;
                sphere.position.x = 20 + (10 * (Math.cos(step)));
                sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));
 
                // render using requestAnimationFrame
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }
            //根据窗体的大小改变，有一定的算法
            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
        }
 
 
    </script>
    <link rel="stylesheet" href="../css/default.css">
</head>
<body>
    <div id="webgl-output"></div>
 
    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        (function () {
            // your page initialization code here
            // the DOM will be available here
            init()
        })();
    </script>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-moible-web-app-capable" content="yes">
    <meta name="apple-moible-web-app-status-bar-style" content="black">
    <title>Example 02.04 - Geometries</title>
    <meta content=" Three.js r95" name="keywords">
    <meta content=" Three.js r95" name="description">
    <meta name="author" content="Geovin Du">
    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" type="image/gif" />
    <script type="text/javascript" charset="UTF-8" src="../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ConvexGeometry.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/QuickHull.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ParametricGeometries.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/utils/SceneUtils.js"></script>
 
    <script type="text/javascript" src="../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../libs/util/dat.gui.js"></script>
 
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript">
        function init() {
            // listen to the resize events  监听窗体大小事件
            window.addEventListener('resize', onResize, false);
            var stats = initStats();
 
            // create a scene, that will hold all our elements such as objects, cameras and lights.
            var scene = new THREE.Scene();
 
            // create a camera, which defines where we're looking at.
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 
            // create a render and set the size
            var renderer = new THREE.WebGLRenderer();
 
            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
 
            // create the ground plane
            var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
            var planeMaterial = new THREE.MeshLambertMaterial({
                color: 0xffffff
            });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true;
 
            // rotate and position the plane
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 0;
            plane.position.y = 0;
            plane.position.z = 0;
 
            // add the plane to the scene
            scene.add(plane);
 
            // position and point the camera to the center of the scene
            camera.position.x = -50;
            camera.position.y = 30;
            camera.position.z = 20;
            camera.lookAt(new THREE.Vector3(-10, 0, 0));
 
            // add subtle ambient lighting
            var ambientLight = new THREE.AmbientLight(0x555555);
            scene.add(ambientLight);
 
            // add spotlight for the shadows
            var spotLight = new THREE.SpotLight(0xffffff, 1.2, 150, Math.PI / 4, 0, 2);
            spotLight.shadow.mapSize.height = 1024;
            spotLight.shadow.mapSize.width = 1024;
            spotLight.position.set(-40, 30, 30);
            spotLight.castShadow = true;
            scene.add(spotLight);
 
            // add geometries
            addGeometries(scene);
 
            // add the output of the renderer to the html element
            document.getElementById("webgl-output").appendChild(renderer.domElement);
 
            // call the render function
            var step = 0;        
 
 
            //添加几何体
            function addGeometries(scene) {
                var geoms = [];
 
                geoms.push(new THREE.CylinderGeometry(1, 4, 4));
 
                // basic cube
                geoms.push(new THREE.BoxGeometry(2, 2, 2));
 
                // basic spherer
                geoms.push(new THREE.SphereGeometry(2));
 
                geoms.push(new THREE.IcosahedronGeometry(4));
 
                // create a convex shape (a shape without dents)
                // using a couple of points
                // for instance a cube
                var points = [
                    new THREE.Vector3(2, 2, 2),
                    new THREE.Vector3(2, 2, -2),
                    new THREE.Vector3(-2, 2, -2),
                    new THREE.Vector3(-2, 2, 2),
                    new THREE.Vector3(2, -2, 2),
                    new THREE.Vector3(2, -2, -2),
                    new THREE.Vector3(-2, -2, -2),
                    new THREE.Vector3(-2, -2, 2)
                ];
                geoms.push(new THREE.ConvexGeometry(points));
 
                // create a lathgeometry
                //http://en.wikipedia.org/wiki/Lathe_(graphics)
                var pts = []; //points array - the path profile points will be stored here
                var detail = .1; //half-circle detail - how many angle increments will be used to generate points
                var radius = 3; //radius for half_sphere
                for (var angle = 0.0; angle < Math.PI; angle += detail) //loop from 0.0 radians to PI (0 - 180 degrees)
                    pts.push(new THREE.Vector3(Math.cos(angle) * radius, 0, Math.sin(angle) * radius)); //angle/radius to x,z
                geoms.push(new THREE.LatheGeometry(pts, 12));
 
                // create a OctahedronGeometry
                geoms.push(new THREE.OctahedronGeometry(3));
 
                // create a geometry based on a function
                geoms.push(new THREE.ParametricGeometry(THREE.ParametricGeometries.mobius3d, 20, 10));
 
                //
                geoms.push(new THREE.TetrahedronGeometry(3));
 
                geoms.push(new THREE.TorusGeometry(3, 1, 10, 10));
 
                geoms.push(new THREE.TorusKnotGeometry(3, 0.5, 50, 20));
 
                var j = 0;
                for (var i = 0; i < geoms.length; i++) {
                    var cubeMaterial = new THREE.MeshLambertMaterial({
                        wireframe: true,
                        color: Math.random() * 0xffffff
                    });
 
                    var materials = [
 
                        new THREE.MeshLambertMaterial({
                            color: Math.random() * 0xffffff
                        }),
                        new THREE.MeshBasicMaterial({
                            color: 0x000000,
                            wireframe: true
                        })
 
                    ];
 
                    var mesh = THREE.SceneUtils.createMultiMaterialObject(geoms[i], materials);
                    mesh.traverse(function (e) {
                        e.castShadow = true
                    });
 
                    //var mesh = new THREE.Mesh(geoms[i],materials[i]);
                    //mesh.castShadow=true;
                    mesh.position.x = -24 + ((i % 4) * 12);
                    mesh.position.y = 4;
                    mesh.position.z = -8 + (j * 12);
 
                    if ((i + 1) % 4 == 0) j++;
                    scene.add(mesh);
                }
 
            }
            //工具栏
            var controls = new function () {
                this.rotationSpeed = 0.02;   //默认值           
            };
            //加载工具栏
            var gui = new dat.GUI();
            gui.add(controls, 'rotationSpeed', 0, 0.5);
 
            var trackballControls = initTrackballControls(camera, renderer);
            var clock = new THREE.Clock();
 
            render();
 
            function render() {
 
                trackballControls.update(clock.getDelta());
                stats.update();
 
 
                // rotate the cubes around its axes  工具栏设置变化值
                scene.traverse(function (e) {
                    if (e instanceof THREE.Mesh && e != plane) {
 
                        e.rotation.x += controls.rotationSpeed;
                        e.rotation.y += controls.rotationSpeed;
                        e.rotation.z += controls.rotationSpeed;
                    }
                });
 
                // render using requestAnimationFrame
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }
 
            //根据窗体的大小改变，有一定的算法
            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
        }
    </script>
    <link rel="stylesheet" href="../css/default.css">
 
</head>
<body>
    <div id="webgl-output">
    </div>
 
    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        (function () {
            // your page initialization code here
            // the DOM will be available here
            init()
        })();
    </script>
 
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-moible-web-app-capable" content="yes">
    <meta name="apple-moible-web-app-status-bar-style" content="black">
    <title>Example 02.08 - Cameras,Audio</title>
    <meta content=" Three.js r95" name="keywords">
    <meta content=" Three.js r95" name="description">
    <meta name="author" content="Geovin Du">
    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" type="image/gif" />
    <style>
        div {
            display: block;
        }
        #fwa {
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 0;
            position: absolute;
            opacity: 0;
            z-index: 10
        }
        .buttonBG {
            z-index: 2;
            background-color: #000;
            position: absolute;
            border: 1px solid #fff;
        }
        .button {
            text-align: center;
            font-size: 1em;
            color: #eee;
            line-height: 40px;
            z-index: 40;
            position: absolute;
        }
        #topLeft {
            left: 15px;
        }
 
        #topLeft, #topRight {
            width: 130px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top:150px;
        }
         
 
        #topRight {
            right: 15px;
        }
 
        #topLeft, #topRight {
            width: 130px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 150px;
        }
        #toolBar {
            width: 590px;
            height: 40px;
            left: 50%;
            margin-left: -145px;
            bottom: 40px;
            z-index: 2;
            position: absolute;
            color:#ff0000;
        }
    </style>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ConvexGeometry.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/QuickHull.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/geometries/ParametricGeometries.js"></script>
    <script type="text/javascript" src="../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../libs/util/dat.gui.js"></script>
 
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript">
        function init() {
 
            window.addEventListener('resize', onResize, false);
            var stats = initStats();
            var clock = new THREE.Clock();
            // create a scene, that will hold all our elements such as objects, cameras and lights.
            var scene = new THREE.Scene();
 
            initDefaultLighting(scene);
 
            // create a camera, which defines where we're looking at.
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.x = 120;
            camera.position.y = 60;
            camera.position.z = 180;
 
            /*1
            //声音
            var analyser;
            // create an AudioListener and add it to the camera
            var listener = new THREE.AudioListener();
            camera.add(listener);
            // create an Audio source
            var sound = new THREE.Audio(listener);
            // load a sound and set it as the Audio object's buffer
            var audioLoader = new THREE.AudioLoader();
            audioLoader.load('../assets/audio/cow.ogg', function (buffer) {
                sound.setBuffer(buffer);
                sound.setLoop(false); // 一次
                sound.setVolume(0.5);
                sound.play();
            });
            // scene(audioLoader);
            // create an AudioAnalyser, passing in the sound and desired fftSize
            analyser = new THREE.AudioAnalyser(sound, 32);
            // get the average frequency of the sound
            var data = analyser.getAverageFrequency();
            */
 
 
            //2 声音
            var listener1 = new THREE.AudioListener();
            camera.add(listener1);
 
            // controls = new THREE.FirstPersonControls(camera);
 
            // create a render and set the size
            var renderer = new THREE.WebGLRenderer();
 
            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);
 
            // create the ground plane
            var planeGeometry = new THREE.PlaneGeometry(180, 180);
            var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
 
 
            // rotate and position the plane
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 0;
            plane.position.y = 0;
            plane.position.z = 0;
 
            // add the plane to the scene
            scene.add(plane);
 
            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
 
            for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {
                for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {
                    var rnd = Math.random() * 0.75 + 0.25;
                    var cubeMaterial = new THREE.MeshLambertMaterial();
                    cubeMaterial.color = new THREE.Color(rnd, 0, 0);
                    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
 
                    cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);
                    cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);
                    cube.position.y = 2;
 
                    scene.add(cube);
 
 
 
 
                }
            }
 
            var lookAtGeom = new THREE.SphereGeometry(3);
            var lookAtMesh = new THREE.Mesh(lookAtGeom, new THREE.MeshLambertMaterial({ color: 0x00ff00 }));
            scene.add(lookAtMesh);
 
             
            //var cube = new THREE.BoxGeometry(40, 40, 40);          
            var material_1 = new THREE.MeshBasicMaterial({
                color: 0xffffff,
                map: THREE.ImageUtils.loadTexture("../assets/textures/animals/cow.png")
            });
 
            // sound spheres
            var mesh1 = new THREE.Mesh(cubeGeometry, material_1);
            mesh1.position.set(0, 20, 100);
            scene.add(mesh1);
        /**/
            //声音
            var posSound1 = new THREE.PositionalAudio(listener1);
            var audioLoader = new THREE.AudioLoader();
            audioLoader.load('../assets/audio/cow.ogg', function (buffer) {
                posSound1.setBuffer(buffer);
                posSound1.setRefDistance(30);
                posSound1.play();
                posSound1.setRolloffFactor(10);
                posSound1.setVolume(2.5); //音量
                posSound1.setLoop(false);//不循环false  true
            });
             
 
            mesh1.add(posSound1);
 
            // ground
            var helper = new THREE.GridHelper(500, 10);
            helper.position.y = 0.1;
            scene.add(helper);        
 
 
            
 
            var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
            directionalLight.position.set(-20, 40, 60);
            scene.add(directionalLight);
 
 
            // add subtle ambient lighting
            var ambientLight = new THREE.AmbientLight(0x292929);
            scene.add(ambientLight);
 
            // add the output of the renderer to the html element
            document.getElementById("webgl-output").appendChild(renderer.domElement);
 
            // call the render function
            var step = 0;
 
            var controls = new function () {
                this.perspective = "Perspective";
                this.switchCamera = function () {
                    if (camera instanceof THREE.PerspectiveCamera) {
                        camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
                        camera.position.x = 120;
                        camera.position.y = 60;
                        camera.position.z = 180;
 
                        camera.lookAt(scene.position);
                        this.perspective = "Orthographic";
                    } else {
                        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                        camera.position.x = 120;
                        camera.position.y = 60;
                        camera.position.z = 180;
 
                        camera.lookAt(scene.position);
                        this.perspective = "Perspective";
                    }
                };
            };
 
            var gui = new dat.GUI();
            gui.add(controls, 'switchCamera');
            gui.add(controls, 'perspective').listen();
 
            // make sure that for the first time, the
            // camera is looking at the scene
            //camera.lookAt(scene.position);
 
 
           // render();
            animate();
 
            function animate() {
                requestAnimationFrame(animate);
                render();
            }
 
 
            var step = 0;
 
            function render() {
 
 
                //var delta = clock.getDelta(), time = clock.getElapsedTime() * 5;
                //controls.update(delta);
 
                stats.update();
                // render using requestAnimationFrame
                step += 0.02;
                if (camera instanceof THREE.Camera) {
                    var x = 10 + (100 * (Math.sin(step)));
                    camera.lookAt(new THREE.Vector3(x, 10, 0));
                    lookAtMesh.position.copy(new THREE.Vector3(x, 10, 0));
                }
 
                //        .position.x = 20+( 10*(Math.cos(step)));
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }
 
 
            //根据窗体的大小改变，有一定的算法
            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
        }
 
 
    </script>
    <link rel="stylesheet" href="../css/default.css">
 
</head>
<body>
    <!-- Div which will hold the Output -->
    <div id="webgl-output">
 
 
 
    </div>
    <div id="topLeft"><div id="topLeftButton0" style="visibility: visible; left: 0px;"><div id="backgroundtopLeftButton0" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.4; left: 0px;"></div><div id="buttontopLeftButton0" class="button" style="width: 40px; height: 40px; left: 0px;"><img src="../../gui/fullscreen.png"></div></div><div id="topLeftButton1" style="visibility: visible; left: 45px;"><div id="backgroundtopLeftButton1" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.4; left: 45px;"></div><div id="buttontopLeftButton1" class="button" style="width: 40px; height: 40px; left: 45px;"><img src="../../gui/camera.png"></div></div><div id="topLeftButton2" style="visibility: visible; left: 90px;"><div id="backgroundtopLeftButton2" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.4; left: 90px;"></div><div id="buttontopLeftButton2" class="button" style="width: 40px; height: 40px; left: 90px;"><img src="../../gui/plus.png"></div></div></div>
    <div id="topRight"><div id="topRightButton0" style="visibility: visible; right: 0px;"><div id="backgroundtopRightButton0" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.3; right: 0px;"></div><div id="buttontopRightButton0" class="button" style="width: 40px; height: 40px; right: 0px;"><img src="../../gui/facebook.png"></div></div><div id="topRightButton1" style="visibility: visible; right: 45px;"><div id="backgroundtopRightButton1" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.3; right: 45px;"></div><div id="buttontopRightButton1" class="button" style="width: 40px; height: 40px; right: 45px;"><img src="../../gui/google.png"></div></div><div id="topRightButton2" style="visibility: visible; right: 90px;"><div id="backgroundtopRightButton2" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.3; right: 90px;"></div><div id="buttontopRightButton2" class="button" style="width: 40px; height: 40px; right: 90px;"><img src="../../gui/twitter.png"></div></div></div>
    <div id="toolBar"><div id="audioButton" style="visibility: visible; left: 255px;"><div id="backgroundaudioButton" class="buttonBG" style="width: 40px; height: 40px; opacity: 0.5; left: 255px;"></div><div id="buttonaudioButton" class="button" style="width: 40px; height: 40px; left: 255px;"><img src="../../gui/volumeOn.png"></div></div></div>
 
        <!-- Javascript code that runs our Three.js examples -->
        <script type="text/javascript">
            (function () {
                // your page initialization code here
                // the DOM will be available here
                init()
            })();
        </script>
 
 
</body>
</html>

　　

posted @   ®Geovin Du Dream Park™  阅读(66)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示