首页 > 代码库 > Three.js纹理贴图正方体旋转动画效果
Three.js纹理贴图正方体旋转动画效果
在线演示
使用three.js生成的正方体选装3D效果。
推荐使用chrome等现代浏览器观看(需要支持webGL)
如果大家对three.js 3D类库比较敢兴趣,请访问以下课程库:
Javascript 3D类库three.js基础入门介绍
相关代码:
- var scene = new THREE.Scene();
- var camera = new THREE.PerspectiveCamera(90, //vertical field of view (from bottom to top) in degrees
- 350/350, //aspect ratio where the height of the element divides the width
- 5, //near clipping plane
- 5000); //far clipping plane
- var renderer = new THREE.WebGLRenderer();
- renderer.setSize(350, 350);
- document.body.appendChild(renderer.domElement);
- var geometry = new THREE.BoxGeometry(500, 500, 500, 1, 1, 3);
- var crateTexture = new THREE.ImageUtils.loadTexture("http://www.gbtags.com/gb/networks/themes/img/weixin.jpg");
- var material = new THREE.MeshBasicMaterial({map: crateTexture, color: 0xffffff, wireframe: false});
- var cube = new THREE.Mesh(geometry, material);
- scene.add(cube);
- camera.position.z = 1000;
- //修改为动画渲染场景到镜头
- function render(){
- requestAnimationFrame(render);
- cube.rotation.x += 0.03;
- cube.rotation.y += 0.03;
- renderer.render(scene, camera);
- }
- //调用render方法
- render();
Three.js纹理贴图正方体旋转动画效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。