1 /** 2 * 场景（scene） 3 */ 4 var scene = new THREE.Scene(); // 创建场景 5 scene.add(x); // 插入场景 6 /** 7 * 相机（camera） 8 */ 9 // 正交投影相机 10 var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far); 11 // 透视头像相机 12 var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // fov：人眼夹角，aspect：长宽比 13 /** 14 * 渲染器（renderer） 15 */ 16 var renderer = new THREE.WebGLRenderer(options); 17 // options {} 可选。参数： 18 // canvas：element <canvas></canvas> 19 renderer.setSize(长, 宽); 20 element.appendChild(renderer.domElement); // 插入节点 21 renderer.setClearColor(color, opacity); // 设置清除后的颜色 16进制 22 renderer.clear(); // 清除面板 23 renderer.render(scene, camera); // 渲染 24 /** 25 * 光照(light) 26 */ 27 new THREE.AmbientLight(颜色); // 环境光 28 new THREE.PointLight(颜色, 强度, 距离); // 点光源 29 new THREE.DirectionalLight(颜色, 亮度); // 平行光 30 new THREE.SpotLight(颜色, 强度, 距离, 夹角, 衰减指数); // 聚光灯 31 /** 32 * 几何形状 33 */ 34 new THREE.CubeGeometry(长, 宽, 高, 长的分割, 宽的分割, 高的分割); // 立方体 35 new THREE.PlanGeometry(长,宽, 长的分割, 宽的分割); // 平面 36 new THREE.SphereGeometry(半径, 经度切片, 纬度分割, 经度分割, 经度跨过, 纬度开始, 纬度跨过); // 球体 37 new THREE.CircleGeometry(半径, 切片数, 开始, 跨过角度); // 圆形 38 new THREE.CylinderGeometry(顶部面积, 底部面积, 高, 圆分割, 高分割, 是否没有顶面和底面); // 圆台 39 new THREE.TetrahedronGeometry(半径, 细节); // 正四边形 40 new THREE.OctahedronGeometry(半径, 细节); // 正八边形 41 new THREE.IconsahedronGeometry(半径, 细节); // 正十二边形 42 new THREE.TorusGeometry(半径, 管道半径, 纬度分割, 经度分割, 圆环面的弧度); // 圆环面 43 // 自定义形状 44 var geometry = new THREE.Geometry(); 45 geometry.vertices.push(new THREE.Vectory3(x, y, z)); // 点，其中x、y、z为坐标 46 geometry.faces.push(new THREE.Faces3(x, y, z)); // 面，其中x、y、z为点的数组的索引，三点确定一个面 47 /** 48 * 材质 49 */ 50 new THREE.MeshBasicMaterial(options); // 基本材质 51 // options {} 可选。参数： 52 // visible：是否可见 53 // color：颜色 54 // wireframe: 是否渲染线而非面 55 // side：THREE.FrontSide 正面，THREE.BackSide 反面，THREE.DoubleSide 双面 56 // map: 贴图 57 new THREE.MeshLambertMaterial(options); // Lambert材质，适合光照 58 // ambient：反射能力 59 // emissive：自发光颜色 60 new THREE.MeshPhongMaterial(); // Phong材质，适合金属和镜面 61 // specular：指定该材质的光亮程度及其高光部分的颜色，如果设置成和color属性相同的颜色，则会得到另一个更加类似金属的材质，如果设置成grey灰色，则看起来像塑料 62 // shininess：光斑大小（值越大，光斑越小） 63 // alphaTest: 透明度 64 new THREE.MeshDepthMaterial()：//根据网格到相机的距离，该材质决定如何给网格染色 65 new THREE.MeshNormalMaterial()：//方向材质，根据物体表面的法向量计算颜色 66 new THREE.MeshFaceMaterial() // 设置不同面的贴图，参数为单个贴图的数组 67 /** 68 * 贴图 69 */ 70 var texture = new THREE.TextureLoader().load(url); 71 texture.wrapS texture.wrapT = THREE.RepeatWrapping // 贴图的重复方式 72 texture.repeat.set(x, y) // 重复次数 73 new THREE.texture(canvas) // 将canvas作为贴图 74 /** 75 * 模型贴图结合 76 */ 77 var mesh = new THREE.Mesh(形状, 材质); 78 mesh.position // 位置 mesh.position.x（y、z） 或 mesh.position.set(x, y, z) 79 mesh.scale // 缩放 80 mesh.rotation // 旋转 81 /** 82 * 状态监视PFS 83 */ 84 var stats = new Stats(); 85 stats.domElement // 节点 86 stats.begin() // 开始 87 stats.end() // 结束