效果：
代码：
<!DOCTYPE html>
<!-- The previous line tells the browser, that the page uses the HTML5 standard. -->
<html>
<head>
<meta charset="utf-8"/>
<title>Three.js tutorial - Lesson 01</title>
<!-- The following meta line optimizes the site for mobile devices. It sets the viewport size
to the screen size, so it will be displayed maximized, but unscaled. -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<style type="text/css">
body {
/* Set the background color of the HTML page to black */
background: #eeeeee;
/* Hide oversized content. This prevents the scroll bars. */
overflow: hidden;
}
</style>
<!-- Include Three.js libraries -->
<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>
<!-- This is the DIV element which will contain the WebGL canvas. To be identifiable lateron,
the id 'WebGLCanvas' is applied to it. -->
<div id="WebGLCanvas"></div>
<!-- This JavaScript block encloses the Three.js commands -->
<script>
// Create the scene, in which all objects are stored (e. g. camera, lights,
// geometries, ...)
var scene = new THREE.Scene();
// Get the size of the inner window (content area) to create a full size renderer
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// Now that we have a scene, we want to look into it. Therefore we need a camera.
// Three.js offers three camera types:
// - PerspectiveCamera (perspective projection)
// - OrthographicCamera (parallel projection)
// - CombinedCamera (allows to switch between perspective / parallel projection
// during runtime)
// In this example we create a perspective camera. Parameters for the perspective
// camera are ...
// ... field of view (FOV),
// ... aspect ratio (usually set to the quotient of canvas width to canvas height)
// ... near and
// ... far.
// Near and far define the cliping planes of the view frustum. Three.js provides an
// example (http://mrdoob.github.com/three.js/examples/
// -> canvas_camera_orthographic2.html), which allows to play around with these
// parameters.
// The camera is moved 10 units towards the z axis to allow looking to the center of
// the scene.
// After definition, the camera has to be added to the scene.
var camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position); //相机聚焦于场景中心
scene.add(camera);
// Global renderer object
var renderer;
if(Detector.webgl){
renderer = new THREE.WebGLRenderer({antialias:true}); //创建一个渲染器（具有抗锯齿效果）
// If its not supported, instantiate the canvas renderer to support all non WebGL browsers
} else {
renderer = new THREE.CanvasRenderer();
}
// Set the background color of the renderer to black, with full opacity
renderer.setClearColor(0xeeeeee, 1);
// Set the renderers size to the content areas size
renderer.setSize(canvasWidth, canvasHeight);
// Get the DIV element from the HTML document by its ID and append the renderers DOM
// object to it
document.getElementById("WebGLCanvas").appendChild(renderer.domElement);
// Create the triangle (or any arbitrary geometry).
// 1. Instantiate the geometry object
// 2. Add the vertices
// 3. Define the faces by setting the vertices indices
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));
// Create a white basic material and 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,
side:THREE.DoubleSide
});
// Create a mesh and insert the geometry and the material. Translate the whole mesh
// by -1.5 on the x axis and by 4 on the z axis. Finally add the mesh to the scene.
var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial);
triangleMesh.position.set(-1.5, 0.0, 4.0);
scene.add(triangleMesh);
// The creation of the square is done in the same way as the triangle, except of the
// face definition. Instead of using one THREE.Face3, we have to define two
// THREE.Face3 objects.
// 1. Instantiate the geometry object
// 2. Add the vertices
// 3. Define the faces by setting the vertices indices
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));
// Create a white basic material and activate the 'doubleSided' attribute.
var squareMaterial = new THREE.MeshBasicMaterial({
color:0xFFFFFF,
side:THREE.DoubleSide
});
// Create a mesh and insert the geometry and the material. Translate the whole mesh
// by 1.5 on the x axis and by 4 on the z axis and add the mesh to the scene.
var squareMesh = new THREE.Mesh(squareGeometry, squareMaterial);
squareMesh.position.set(1.5, 0.0, 4.0);
scene.add(squareMesh);
/**
* Render the scene. Map the 3D world to the 2D screen.
*/
function render(){
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
附注：当前笔者使用的three.js版本是r69