三维技术探索-Three.js开发指南

一、场景搭建

1、使用three.js搭建三维场景需要的基本要素

渲染器与场景

（1、）渲染器(renderer)：是三维中的基本，是three.js的主要对象

const renderer = new THREE.WebGLRenderer();

（2、）场景（scene）：屏幕中间的矩形，是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源，以及使用的相机,

const scene = new THREE.Scene();

场景中常见的基础方法：
1、添加对象：scene.add（object）
2、移除对象：scene.remove(object);
3、雾化效果：scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
4、改变材质： scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

THREE.Scene对象有时被称为场景图，可以用来保存所有图形场景的必要信息。

构建一个简单的场景图

1、摄像机（camera）：摄像机决定了能够在场景看到什么

     const camera = new THREE.PerspectiveCamera(
            45,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
          );

透视投影摄像机：THREE.PerspectiveCamera(fov,aspect,near,far,zoom)
fov : 视场，指观看视角（通常视角大小为60-90度）
aspect : 长宽比（决定横向视角和纵向视角的比例关系）
near : 近面距离（定义相机从距离物体多近的距离开始渲染）
far : 远面距离（定义相机从当前位置能够看多远）
zoom : 变焦（变焦值默认是1，控制场景的放大和缩小，当大于1时场景将放大，反之）

image.png

2、光源(spotLight)：对材质如何显示，以及生成阴影时材质如何使用产生影响

```
  const spotLight = new THREE.SpotLight(0xffffff);
```

3、物体（Geometry+MeshLambertMaterial）：相机里主要的渲染对象，如方块、球体。一个物体是由几何体加上材质构成的。

        // 设置平面（1、宽、高设置 ；2、平面外观设置）
      const planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
      // MeshBasicMaterial材质不受光源影响
      const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });

      const plane = new THREE.Mesh(planeGeometry, planeMaterial);

构成物体的要素

1. 几何体(Geometry)：对象顾名思义代表一些几何体，如球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。

2. 材质(Material)：对象代表绘制几何体的表面属性，包括使用的颜色，和光亮程度。

3. 网格(Mesh)：Geometry和Material定义了物体的外观和材质，而Mesh则是将物体放到场景中去的方法。

基本场景效果图

image.png

场景构建源码：