Three.js零基础入门教程（郭龙邦）Three.js中文文档第一篇场景几何GeometryTHREE.BoxGeometry(width,height,length)CubeTHREE.SphereGeometry(radius,number),number)球体vargeometry=newTHREE.BoxGeometry(100,100,100);vargeometry=newTHREE.SphereGeometry(60,40,40);MaterialMaterial设置立方体的颜色、透明度等属性varmaterial=newTHREE。MeshLambertMaterial({颜色:0x0000ff});光源Light创建点光源，参数定义光强。当光源强度变低时，物体也会变暗。varpoint=newTHREE.PointLight(0xffffff);CameraTHREE.OrthographicCamera()创建一个正交投影相机对象，其参数可更改相机窗口的大小。取景范围变小，物体变大，反之亦然。varcamera=newTHREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);总体结构流程THREE.Scene()CreatesceneobjectCreateobjectobjectnewTHREE.BoxGeometryCreateobjectnewTHREE。MeshLambertMaterial使用材质newTHREE.Mesh(box,material)创建网格，添加物体newTHREE.PointLight(0xffffff)创建光源newTHREE.AmbientLight(0x444444)创建环境光scene.add(mesg/point/ambient)添加对象THREE.OrthographicCamera()创建相机对象THREE.WebGLRenderer()创建渲染对象renderer.render(scene,camera)ProjectionInsertmultiplegeometryGeometry//长方体参数：长，宽，高vargeometry=newTHREE.BoxGeometry(100,100,100);//球体参数：半径60，经纬度细分数40,40vargeometry=newTHREE.SphereGeometry(60,40,40);//圆柱体参数：圆柱顶和底部直径50,50高度100圆周段数vargeometry=newTHREE.CylinderGeometry(50,50,100,25);//正八面体vargeometry=newTHREE.OctahedronGeometry(50);//正十二面体vargeometry=newTHREE.DodecahedronGeometry(50);//二十面体vargeometry=newTHREE.二十面体几何(50);Auxiliary3DcoordinatesystemAxisHelper//辅助坐标系参数250表示坐标系的大小，可以根据场景大小设置varaxisHelper=newTHREE.轴助手（250）；scene.add(axisHelper);同时绘制多个几何代码vargeometry1=newTHREE.BoxGeometry(100,100,100);varmaterial1=newTHREE.MeshLambertMaterial({颜色:0x0000ff,});varmesh1=newTHREE.Mesh(geometry1,material1);scene.add(mesh1);vargeometry2=newTHREE.SphereGeometry(60,40,40);varmaterial2=newTHREE.MeshLambertMaterial({color:0xff00ff,});varmesh2=newTHREE.Mesh(geometry2,material2);mesh2.translateX(70));//球体网格模型沿Y轴正方向平移120。,});varmesh3=newTHREE.Mesh(geometry3,material3);//mesh3.translateX(120);//球面网格模型沿Y轴正方向平移120mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0scene.add(mesh3);effectmaterial材质类型MeshBasicMaterial基本网格材质，不受光影响的材质MeshLambertMaterialLambert网格材质，响应光，漫射ReflectionMeshPhongMaterial高光Phong材质，响应光MeshStandardMaterialPBR物理材质，与高光Phong材质相比，可以更好的模拟金属、玻璃等效果Materialproperties修改THREE.MeshLambertMaterial()的参数，改变geometry的显示效果WireframeeffectvarsphereMaterial=newTHREE.MeshLambertMaterial({color:0xff0000,wireframe:true,//将几何渲染为线框});透明效果varsphereMaterial=newTHREE.MeshLambertMaterial({color:0xff0000,opacity:0.7,transparent:true,});高光效果好像没什么区别//leftvarsphereMaterial=newTHREE.MeshPhongMaterial({color:0x0000ff,specular:0x4488ee,shininess:12,});//rightvarsphereMaterial=newTHREE.MeshPhongMaterial({color:0x0000ff,高光:0x4488ee,光泽度:12,});将光泽度更改为-100以使其更加明显。当没有光源时，所有物体都是黑色的。以上例子都是有光源时显示的类型AmbientLightAmbientLightPointLight点光源DirectionalLight平行光，比如太阳光SpotLightSpot光源注意：MeshBasicMaterial基础材质不会反光，所以要注意切换材质，否则将没有环境光的影响。环境光只设置了整个空间的感光效果，设置环境光后可以看清物体的颜色，但是看不清物体的棱角，没有好的三-维度效应。varambient=newTHREE.AmbientLight(0x444444);物体变成三维，当点光源的位置设置为(0,0,0)时无效，因为光源无法照亮物体内部的物体表面//点光源varpoint=newTHREE.PointLight(0xffffff);point.position.set(400,200,300);scene.add(point);而当鼠标控制打开，调整到物体背面时，又是暗的，因为点光源不能照到另一边，设置点光源的相对位置可以照亮整个物体varpoint=newTHREE.PointLight(0xffffff);point.position.set(-400,-200,-300);scene.add(point);
