<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<script src="../js/three.js"></script> ???<style> ???????canvas{ ???????????width:100% !important; ???????????height: 100% !important; ???????} ???</style></head><body></body><script> ???//定义场景 ???var scene = new THREE.Scene(); ???/* ???????75：相当于相机的视角是75度，可以理解为人的上眼皮和下眼皮的夹角。此处是相机可以看到的景物的夹角 ????????window.innerWidth/window.innerHeight：近平面的纵横比，也就是宽高比，如果大于1，那么说明相机拍摄出的物体的宽度大于高度 ???????1：相机最近能够拍摄到的位置 ???????1000：相机最远能拍摄到的位置 ????*/ ???var camera =new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000); ???var renderer = new THREE.WebGLRenderer(); ???renderer.setSize(window.innerWidth,window.innerHeight); ???document.body.appendChild(renderer.domElement); ???//创建一个几何体对象，这个几何体对象是矩形的（正方形是特殊的矩形），参数分别是该矩形的长宽高 ???var geometry = new THREE.CubeGeometry(2,2,2); ???/*定义该几何体的材质，可以这样理解：geometry是我们定义的一个几何体，但这只是一个空架子，我们需要用材质来将这个架子填充起来，从而使 ???????我们能够在网页上看到这个几何体实体。材质可以是颜色，纹理等等 ???*/ ???var material ?= new THREE.MeshBasicMaterial({color:0xff000}); ???//将几何体和材质联系起来，相当于将颜色这些东西粉刷到几何体上，就成为了一个我们肉眼可见的几何实体cube ???var cube = new THREE.Mesh(geometry,material); ???//将实体加入到场景当中 ???scene.add(cube); ???//相机的坐标在z轴，相机默认的原点是在我们屏幕的中心 ???camera.position.z = 5; ???function render(){ ???????//循环调用render（） ???????requestAnimationFrame(render); ???????cube.rotation.x += 0.01; ???????renderer.render(scene,camera); ???} ???render();</script></html>用three.js制作一个旋转的正方体
原文地址：http://www.cnblogs.com/hzStudy/p/7712621.html