• Three.js 零根底入门教程(郭隆邦)
  • Three.js 中文文档

First Scene

几何体 Geometry

  • THREE.BoxGeometry(宽, 高, 长) 立方体
  • THREE.SphereGeometry(半径, number, number) 球体
var geometry = new THREE.BoxGeometry(100, 100, 100);var geometry = new THREE.SphereGeometry(60, 40, 40);

资料 Material

对立方体的色彩、透明度等等属性进行设置

var material = new THREE.MeshLambertMaterial({ color: 0x0000ff });

光源 Light

创立一个点光源，参数定义光照强度，光源强度变低时，物体也随之变黯淡

var point = new THREE.PointLight(0xffffff);

相机 Camera

THREE.OrthographicCamera()创立一个正射投影相机对象，参数扭转拍照窗口的大小。取景范畴变小，物体变大，反之变小。

var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

整体构造

过程

  1. THREE.Scene() 创立场景对象

  2. 发明物体对象

    • new THREE.BoxGeometry 创立物体
    • new THREE.MeshLambertMaterial 应用资料
    • new THREE.Mesh(box,material) 创立网格，增加物体
    • new THREE.PointLight(0xffffff) 创立光源
    • new THREE.AmbientLight(0x444444) 创立环境光
    • scene.add(mesg/point/ambient) 向场景中增加对象
  3. THREE.OrthographicCamera() 创立相机对象
  4. THREE.WebGLRenderer() 创立渲染对象
  5. renderer.render(scene,camera) 投影

插入多个几何体

几何体

//长方体 参数：长，宽，高var geometry = new THREE.BoxGeometry(100, 100, 100);// 球体 参数：半径60  经纬度细分数40,40var geometry = new THREE.SphereGeometry(60, 40, 40);// 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数var geometry = new THREE.CylinderGeometry(50, 50, 100, 25);// 正八面体var geometry = new THREE.OctahedronGeometry(50);// 正十二面体var geometry = new THREE.DodecahedronGeometry(50);// 正二十面体var geometry = new THREE.IcosahedronGeometry(50);

辅助三维坐标系 AxisHelper

// 辅助坐标系  参数250示意坐标系大小，能够依据场景大小去设置var axisHelper = new THREE.AxisHelper(250);scene.add(axisHelper);

同时绘制多个几何体

  • 代码
var geometry1 = new THREE.BoxGeometry(100, 100, 100);var material1 = new THREE.MeshLambertMaterial({  color: 0x0000ff,});var mesh1 = new THREE.Mesh(geometry1, material1);scene.add(mesh1);var geometry2 = new THREE.SphereGeometry(60, 40, 40);var material2 = new THREE.MeshLambertMaterial({  color: 0xff00ff,});var mesh2 = new THREE.Mesh(geometry2, material2);mesh2.translateX(70); //球体网格模型沿Y轴正方向平移120scene.add(mesh2);var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);var material3 = new THREE.MeshLambertMaterial({  color: 0xffff00,});var mesh3 = new THREE.Mesh(geometry3, material3);// mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120mesh3.position.set(120, 0, 0); //设置mesh3模型对象的xyz坐标为120,0,0scene.add(mesh3);
  • 成果

资料

资料类型

  • MeshBasicMaterial 根底网格材质，不受光照影响的材质
  • MeshLambertMaterial Lambert 网格材质，与光照有反馈，漫反射
  • MeshPhongMaterial 高光 Phong 材质,与光照有反馈
  • MeshStandardMaterial PBR 物理材质，相比拟高光 Phong 材质能够更好的模仿金属、玻璃等成果

资料属性

批改 THREE.MeshLambertMaterial()的参数，扭转几何体的显示成果

  • 线框成果
var sphereMaterial = new THREE.MeshLambertMaterial({  color: 0xff0000,  wireframe: true, // 将几何图形渲染为线框});

  • 通明成果
var sphereMaterial = new THREE.MeshLambertMaterial({  color: 0xff0000,  opacity: 0.7,  transparent: true,});

  • 高光成果

如同没什么区别

// 右边var sphereMaterial = new THREE.MeshPhongMaterial({  color: 0x0000ff,  specular: 0x4488ee,  shininess: 12,});// 左边var sphereMaterial = new THREE.MeshPhongMaterial({  color: 0x0000ff,  specular: 0x4488ee,  shininess: 12,});

把 shininess 改成-100 略微显著一点了

光源

没有光源时所有的物体都是彩色，下面所有的示例都是在有光源的状况下展现进去的

类型

  • AmbientLight 环境光
  • PointLight 点光源
  • DirectionalLight 平行光，比方太阳光
  • SpotLight 聚光源
留神： MeshBasicMaterial 根底资料是不会反光的，因而留神切换资料，否则是没有成果的

环境光

环境光只是设置了整个空间的敏感成果，设置了环境光之后可能看清物体的色彩，但无奈看清物体的棱角，没有很好的平面成果

var ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);

点光源

设置了点光源之后物体就平面起来了，当把点光源的地位设置为(0,0,0)时是有效的，因为光源在物体外部无奈照射到物体外表

//点光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300);scene.add(point);

而当关上了鼠标管制，调整到物体的反面时，又是暗的，起因是点光源无奈照射到另一面，设置绝对地位的点光源则可照亮整个物体

var point = new THREE.PointLight(0xffffff);point.position.set(-400, -200, -300);scene.add(point);