three.js从入门到精通系列教程006 - three.js创建旋转立方体BoxGeometry-编程知识

three.js从入门到精通系列教程006 - three.js创建旋转立方体BoxGeometry

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>three.js从入门到精通系列教程006 - three.js创建旋转立方体BoxGeometry</title><script src="js/three.js"></script><script src="js/jquery.js"></script>
</head><body><center id="myContainer"></center><script>//创建渲染器var myWidth = 480, myHeight = 320;var myRenderer = new THREE.WebGLRenderer({ antialias: true });//设置渲染尺寸大小myRenderer.setSize(myWidth, myHeight);myRenderer.setClearColor("white", 1);$("#myContainer").append(myRenderer.domElement);var myScene = new THREE.Scene();var k = myWidth / myHeight, s = 120;//创建透视相机OrthographicCameravar myCamera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);myCamera.position.set(400, 300, 200);//设置相机视角myCamera.lookAt(myScene.position);//创建立方体var myGeometry = new THREE.BoxGeometry(100, 100, 100);var myMaterial = new THREE.MeshNormalMaterial();var myMesh = new THREE.Mesh(myGeometry, myMaterial);//立方体放入场景myScene.add(myMesh);//使用定时器实现间隔渲染立方体，模拟旋转setInterval(function () {myMesh.rotateX(0.02);        //按照指定的弧度围绕x轴旋转网格(立方体)myRenderer.render(myScene, myCamera);}, 50);</script>
</body></html>