首页 > 代码库 > Three.js纹理贴图正方体旋转动画效果

Three.js纹理贴图正方体旋转动画效果

2024-08-09 02:37:19   220人阅读

技术分享

在线演示

使用three.js生成的正方体选装3D效果。

推荐使用chrome等现代浏览器观看（需要支持webGL）


如果大家对three.js 3D类库比较敢兴趣，请访问以下课程库：

Javascript 3D类库three.js基础入门介绍

相关代码：

  1. var scene = new THREE.Scene();
  2.  
  3. var camera = new THREE.PerspectiveCamera(90, //vertical field of view (from bottom to top) in degrees
  4. 350/350, //aspect ratio where the height of the element divides the width
  5. 5, //near clipping plane
  6. 5000); //far clipping plane
  7.  
  8. var renderer = new THREE.WebGLRenderer();
  9.  
  10. renderer.setSize(350, 350);
  11.  
  12. document.body.appendChild(renderer.domElement);
  13.  
  14. var geometry = new THREE.BoxGeometry(500, 500, 500, 1, 1, 3);
  15.  
  16. var crateTexture = new THREE.ImageUtils.loadTexture("http://www.gbtags.com/gb/networks/themes/img/weixin.jpg");
  17.  
  18.  
  19. var material = new THREE.MeshBasicMaterial({map: crateTexture, color: 0xffffff, wireframe: false});
  20. var cube = new THREE.Mesh(geometry, material);
  21.  
  22.  
  23.  
  24.  
  25. scene.add(cube);
  26.  
  27. camera.position.z = 1000;
  28.  
  29.  
  30.  
  31. //修改为动画渲染场景到镜头
  32. function render(){
  33. requestAnimationFrame(render);
  34. cube.rotation.x += 0.03;
  35. cube.rotation.y += 0.03;
  36. renderer.render(scene, camera);
  37. }
  38.  
  39. //调用render方法
  40. render();
 

 

Three.js纹理贴图正方体旋转动画效果


联系
我们