效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Three.js tutorial - Lesson 02</title>
<style>body{background: #eeeeee;overflow: hidden;}</style>
<script src="js/r69/three.js"></script>
<script src="js/r69/Detector.js"></script>
<script src="js/r69/CanvasRenderer.js"></script>
<script src="js/r69/Projector.js"></script>
</head>
<body>
<div id="WebGLCanvas"></div>
<script>
var scene = new THREE.Scene();
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
scene.add(camera);
var renderer;
if(Detector.webgl){
renderer = new THREE.WebGLRenderer({antialias:true}); //创建一个抗锯齿效果的渲染器
} else {
renderer = new THREE.CanvasRenderer();
}
renderer.setClearColor(0xeeeeee, 1);
renderer.setSize(canvasWidth, canvasHeight);
document.getElementById("WebGLCanvas").appendChild(renderer.domElement);
var triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3( 0.0, 1.0, 0.0));
triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0));
triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0));
triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
// To color the surface, a material has to be created. If all vertices shall have
// different colors, we need to set the vertex colors of each face. The colors in
// between will be interpolated as color gradients.
// Unfortunately, the canvas renderer doesn't support vertex colors (yet [Three.js,
// release 69]). Either you accept a white face color, or set another face color.
/*给顶点赋予颜色*/
triangleGeometry.faces[0].vertexColors[0] = new THREE.Color(0xFF0000);
triangleGeometry.faces[0].vertexColors[1] = new THREE.Color(0x00FF00);
triangleGeometry.faces[0].vertexColors[2] = new THREE.Color(0x0000FF);
// To activate the vertex color, we have to set 'vertexColors' attribute to
// 'THREE.VertexColors'. Otherwise they won't be displayed.
// Create a basic material, supporting vertex colors. Activate the 'doubleSided'
// attribute to force the rendering of both sides of each face (front and back).
// This prevents the so called 'backface culling'. Usually, only the side is
// rendered, whose normal vector points towards the camera. The other side is not
// rendered (backface culling). But this performance optimization sometimes leads
// to wholes in the surface. When this happens in your surface, simply set
// 'doubleSided' to 'true'.
var triangleMaterial = new THREE.MeshBasicMaterial({
//color:0xFFFFFF,
vertexColors:THREE.VertexColors, //将顶点颜色放入材质中
side:THREE.DoubleSide
});
var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial);
triangleMesh.position.set(-1.5, 0.0, 4.0);
scene.add(triangleMesh);
var squareGeometry = new THREE.Geometry();
squareGeometry.vertices.push(new THREE.Vector3(-1.0, 1.0, 0.0));
squareGeometry.vertices.push(new THREE.Vector3( 1.0, 1.0, 0.0));
squareGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0));
squareGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0));
squareGeometry.faces.push(new THREE.Face3(0, 1, 2));
squareGeometry.faces.push(new THREE.Face3(0, 2, 3));
var squareMaterial = new THREE.MeshBasicMaterial({
color:0x8080FF/*,
side:THREE.DoubleSide */ //不设置side属性为DoubleSide，当正方形旋转到背面就看不到了
});
var squareMesh = new THREE.Mesh(squareGeometry, squareMaterial);
squareMesh.position.set(1.5, 0.0, 4.0);
scene.add(squareMesh);
function render(){
triangleMesh.rotation.y += 0.1; //绕y轴旋转，旋转速率为0.1
squareMesh.rotation.x -= 0.075; //绕x轴旋转，旋转速率为0.075
renderer.render(scene, camera);
requestAnimationFrame(render); //帧动画
}
render();
</script>
</body>
</html>
附注：当前笔者使用的three.js版本是r69