Three.js紋理貼圖正方體旋轉動畫效果

jjfat 9年前發布 | 31K 次閱讀 gbtags three.js

使用three.js生成的正方體選裝3D效果。

推薦使用chrome等現代瀏覽器觀看（需要支持webGL）

如果大家對three.js 3D類庫比較敢興趣，請訪問以下課程庫：

Javascript 3D類庫three.js基礎入門介紹

相關代碼：

  1. var scene = new THREE.Scene();
    2. 

  2.  
    3. 

  3. var camera = new THREE.PerspectiveCamera(90, //vertical field of view (from bottom to top) in degrees
    4. 

  4.                         350/350, //aspect ratio where the height of the element divides the width
    5. 

  5.                         5, //near clipping plane
    6. 

  6.                         5000); //far clipping plane
    7. 

  7.  
    8. 

  8. var renderer = new THREE.WebGLRenderer();
    9. 

  9.  
    10. 

  10. renderer.setSize(350, 350);
    11. 

  11.  
    12. 

  12. document.body.appendChild(renderer.domElement);
    13. 

  13.  
    14. 

  14. var geometry = new THREE.BoxGeometry(500, 500, 500, 1, 1, 3);
    15. 

  15.  
    16. 

  16. var crateTexture = new THREE.ImageUtils.loadTexture("http://www.gbtags.com/gb/networks/themes/img/weixin.jpg"); 
    17. 

  17.  
    18. 

  18.  
    19. 

  19. var material = new THREE.MeshBasicMaterial({map: crateTexture, color: 0xffffff, wireframe: false});
    20. 

  20. var cube = new THREE.Mesh(geometry, material);
    21. 

  21.  
    22. 

  22.  
    23. 

  23.  
    24. 

  24.  
    25. 

  25. scene.add(cube);
    26. 

  26.  
    27. 

  27. camera.position.z = 1000;   
    28. 

  28.  
    29. 

  29.  
    30. 

  30.  
    31. 

  31. //修改為動畫渲染場景到鏡頭
    32. 

  32. function render(){
    33. 

  33.   requestAnimationFrame(render);
    34. 

  34.   cube.rotation.x += 0.03;
    35. 

  35.   cube.rotation.y += 0.03;
    36. 

  36.   renderer.render(scene, camera);
    37. 

  37. }
    38. 

  38.  
    39. 

  39. //調用render方法
    40. 

  40. render();
    41.

 

 本文由用戶 jjfat 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
  本文地址：http://www.baiduhome.net/news/view/19a5bb5