three.js

「爱情、让人受尽委屈。」 2022-05-29 01:40 168阅读 0赞

转自：http://blog.csdn.net/awnuxcvbn/article/details/50736936

1.  <!DOCTYPE html>  
2.  <html>  
3.  <head lang="en">  
4.      <meta charset="UTF-8">  
5.      <title>Lession1</title>  
6.      <script src="js/three.js"></script>  
7.      <script src="js/three.min.js"></script>  
8.    
9.  </head>  
10.   
11. <body>  
12. <div id="container"></div>  
13.   
14. <script src="js/three.min.js"></script>  
15.   
16. <script src="js/loaders/OBJLoader.js"></script>  
17.   
18. <script>  
19.     var container;  
20.   
21.     var camera, scene, renderer;  
22.   
23.     var mouseX = 0, mouseY = 0;  
24.   
25.     var windowHalfX = window.innerWidth / 2;  
26.     var windowHalfY = window.innerHeight / 2;  
27.   
28.   
29.     init();  
30.     animate();  
31.   
32.   
33.     function init() \{  
34.   
35.         container = document.createElement( 'div' );  
36.         document.body.appendChild( container );  
37.   
38.         camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );  
39.         camera.position.z = 10;  
40.   
41.         // scene  
42.   
43.         scene = new THREE.Scene();  
44.   
45.         var ambient = new THREE.AmbientLight( 0x101030 );  
46.         scene.add( ambient );  
47.   
48.         var directionalLight = new THREE.DirectionalLight( 0xffeedd );  
49.         directionalLight.position.set( 0, 0, 1 );  
50.         scene.add( directionalLight );  
51.   
52.         // texture  
53.   
54.         var manager = new THREE.LoadingManager();  
55.         manager.onProgress = function ( item, loaded, total ) \{  
56.   
57.             console.log( item, loaded, total );  
58.   
59.         \};  
60.   
61.         var texture = new THREE.Texture();  
62.   
63.         var onProgress = function ( xhr ) \{  
64.             if ( xhr.lengthComputable ) \{  
65.                 var percentComplete = xhr.loaded / xhr.total \* 100;  
66.                 console.log( Math.round(percentComplete, 2) + '% downloaded' );  
67.             \}  
68.         \};  
69.   
70.         var onError = function ( xhr ) \{  
71.         \};  
72.   
73.   
74.         var loader = new THREE.ImageLoader( manager );  
75.         loader.load( 'car.jpg', function ( image ) \{  
76.   
77.             texture.image = image;  
78.             texture.needsUpdate = true;  
79.   
80.         \} );  
81.   
82.         // model  
83.   
84.         var loader = new THREE.OBJLoader( manager );  
85.         loader.load( 'car.obj', function ( object ) \{  
86.   
87.             object.traverse( function ( child ) \{  
88.   
89.                 if ( child instanceof THREE.Mesh ) \{  
90.   
91.                     child.material.map = texture;  
92.   
93.                 \}  
94.   
95.             \} );  
96.             object.scale.x =  object.scale.y =  object.scale.z = 10;  
97.             object.updateMatrix();  
98.             object.position.y = -3;  
99.             scene.add( object );  
100.   
101.         \}, onProgress, onError );  
102.   
103.         //  
104.   
105.         renderer = new THREE.WebGLRenderer();  
106.         renderer.setPixelRatio( window.devicePixelRatio );  
107.         renderer.setSize( window.innerWidth, window.innerHeight );  
108.         container.appendChild( renderer.domElement );  
109.   
110.         document.addEventListener( 'mousemove', onDocumentMouseMove, false );  
111.   
112.         //  
113.   
114.         window.addEventListener( 'resize', onWindowResize, false );  
115.   
116.     \}  
117.   
118.     function onWindowResize() \{  
119.   
120.         windowHalfX = window.innerWidth / 2;  
121.         windowHalfY = window.innerHeight / 2;  
122.   
123.         camera.aspect = window.innerWidth / window.innerHeight;  
124.         camera.updateProjectionMatrix();  
125.   
126.         renderer.setSize( window.innerWidth, window.innerHeight );  
127.   
128.     \}  
129.   
130.     function onDocumentMouseMove( event ) \{  
131.   
132.         mouseX = ( event.clientX - windowHalfX ) / 2;  
133.         mouseY = ( event.clientY - windowHalfY ) / 2;  
134.   
135.     \}  
136.   
137.     //  
138.   
139.     function animate() \{  
140.   
141.         requestAnimationFrame( animate );  
142.         render();  
143.   
144.     \}  
145.   
146.     function render() \{  
147.   
148.         camera.position.x += ( mouseX - camera.position.x ) \* .5;  
149.         camera.position.y += ( - mouseY - camera.position.y ) \* .5;  
150.   
151.         camera.lookAt( scene.position );  
152.   
153.         renderer.render( scene, camera );  
154.   
155.     \}  
156.   
157. </script>  
158.   
159. </body>  
160.   
161.   
162. </html>