乐趣区

关于three.js:Threejs学习-创建立方体

jiezi
  • 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,40
var 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 轴正方向平移 120
scene.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 轴正方向平移 120
mesh3.position.set(120, 0, 0); // 设置 mesh3 模型对象的 xyz 坐标为 120,0,0
scene.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);

退出移动版