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

阅读：评论：0

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: ElementById('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 ,renderer.domElement);
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     ation.x += 0.05;
37     ation.y += 0.05;
38     der(scene, camera);
39 }
40 
41 function render() {
42     der(scene, camera);
43 }

转载于:.html

本文发布于:2024-02-02 21:28:35，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170688051546552.html

上一篇：MFC截取屏幕图片并保存

下一篇：图解为什么形参的变化不会改变实参的值？

标签：鼠标基础动画 js Cube

留言与评论（共有 0 条评论）