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

时间：2014-12-20 23:20:18 阅读：460 评论：0 收藏：0 [点我收藏+]

标签：

技术分享

在线演示

使用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();

标签：

原文地址：http://www.cnblogs.com/gbtags/p/4175952.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行