码迷,mamicode.com
首页 > Web开发 > 详细

Three.js基础:建立Cube并实现鼠标交互,动画旋转

时间:2018-01-17 15:56:21      阅读:474      评论:0      收藏:0      [点我收藏+]

标签:gpo   spec   draw   can   geo   material   func   anim   arc   

index.html文件:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"> 
 5         <title>Cube</title>
 6         <script type="text/javascript" src="three.js"></script>
 7         <script type="text/javascript" src="mythree.js"></script>    
 8         <script type="text/javascript" src="js/controls/OrbitControls.js"></script>
 9     </head>
10 
11     <body onload="init()">
12         <div>
13             <canvas id="mainCanvas" width="500px" height="500px" ></canvas>
14         </div>
15     </body>
16 
17 </html>

 

mythere.js文件:

 1 var renderer, camera, scene,cube,controls;
 2 
 3 function init() {
 4     // renderer
 5     renderer = new THREE.WebGLRenderer({
 6         canvas: document.getElementById(‘mainCanvas‘)
 7     });
 8     renderer.setClearColor(0x000000); // black
 9     // scene
10     scene = new THREE.Scene();
11     // camera
12     camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
13     camera.position.set(0, 0, 5);
14     scene.add(camera);
15     // a cube in the scene
16     cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 3),
17             new THREE.MeshBasicMaterial({
18                 color: 0xff0000
19             })
20     );
21     scene.add(cube);
22     
23     //controlls
24     controls = new THREE.OrbitControls( camera );
25     controls.addEventListener( ‘change‘, render );    
26     
27     // Animation        
28     requestAnimationFrame(draw);    
29     
30     render();
31 }
32 
33 // Animation
34 function draw() {
35     id = requestAnimationFrame(draw);
36     cube.rotation.x += 0.05;
37     cube.rotation.y += 0.05;
38     renderer.render(scene, camera);
39 }
40 
41 function render() {
42     renderer.render(scene, camera);
43 }

 

Three.js基础:建立Cube并实现鼠标交互,动画旋转

标签:gpo   spec   draw   can   geo   material   func   anim   arc   

原文地址:https://www.cnblogs.com/zhile/p/8302790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!