threejs 小例子，链接文档

开始

• 代码示例
• 资源
• 问答
• 社区
• 教程

第2课：点，矢量和网格

在three.js中创建几何

var material = new THREE.MeshBasicMaterial( {
    color: 0xff0000, side: THREE.DoubleSide } );

var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 5, 10, 0 ) );  // vertex 0
geometry.vertices.push( new THREE.Vector3( 5, 5, 0 ) );   // vertex 1
geometry.vertices.push( new THREE.Vector3( 10, 5, 0 ) );  // vertex 2

geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );  // make a triangle

var mesh = new THREE.Mesh( geometry, material );  // create an object

scene.add( mesh ); // add object to the scene to make it visible

建造楼梯

var geoBlock = new THREE.CubeGeometry( width, height, thickness );
var blockMesh = new THREE.Mesh( geoBlock, material );
// set the X,Y,Z position
stepMesh.position.x = xPosition;
stepMesh.position.y = yPosition;
stepMesh.position.z = zPosition;

饮酒鸟

// values 32, 16 are longitude and latitude tessellations
var sphere = new THREE.Mesh(
    new THREE.SphereGeometry( radius, 32, 16 ), sphereMaterial );

var cylinder = new THREE.Mesh(
    new THREE.CylinderGeometry( radiusTop, radiusBottom, height, 32 ), cylMaterial );

第3课：颜色和材料

设置颜色

var sphereMaterial = new THREE.MeshLambertMaterial( );
// three separate floats to set RGB
sphereMaterial.color.r = 1.0;    
sphereMaterial.color.g = 0.0;
sphereMaterial.color.b = 0.0;
// or use the setRGB method
sphereMaterial.color.setRGB( 0.972, 0.749, 0.141 );
// or use a hex value, 0x00 to 0xFF (0-255), for each channel
sphereMaterial.color.setHex( 0x1280FF );

// or initialize your material with the color
var cylMaterial = new THREE.MeshLambertMaterial( {
    color: 0xF4F100 } );

顶点属性

// how to set the three vertex colors for face #0
var color1 = new THREE.Color( 0xF08000 ); // orange
var color2 = new THREE.Color( 0x808000 ); // olive
var color3 = new THREE.Color( 0x0982FF ); // bright blue
geometry.faces[0].vertexColors = [ color1, color2, color3 ];

漫射材料

material = new THREE.MeshBasicMaterial( {
    color: 0x80fc66, shading: THREE.FlatShading } );
material.color.setRGB( red, green, blue );
var newRed = material.color.r * 0.7;
material.ambient.setRGB( ... );

Ka，Kd和HSL

var color = new Color();
// hue, saturation, and lightness, all 0-1
color.setHSL( 0.117, 0.937, 0.557 ); // orange

透明度和Three.js

var movingBoxMaterial = new THREE.MeshLambertMaterial(
    {
    color: 0xE53319, opacity: 0.7, transparent: true } );

第4课：变换

翻译

sphere.position.x = xPosition;
sphere.position.y = yPosition;
sphere.position.z = zPosition;

回转

cube.rotation.x = xRotationInRadians; // e.g. -70 * Math.PI/180
cube.rotation.y = yRotationInRadians;
cube.rotation.z = zRotationInRadians;

刚体转换与缩放

cube.scale.x = xSize;
cube.scale.y = ySize;
cube.scale.z = zSize;

缩放旋转平移

// This is always the order of application:
cube.scale.set( xSize, ySize, zSize );
cube.rotation.set( xRotationInRadians, yRotationInRadians, zRotationInRadians );
cube.position.set( xPosition, yPosition, zPosition );

Object3D

var block = new THREE.Mesh(
    new THREE.CubeGeometry( 100, 4, 4 ), clockHandMaterial );
block.position