三维技术探索-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

场景构建源码：

<template>
  <div>
    <div class="three" id="WebGL-output"></div>
  </div>
</template>

<script>
import * as THREE from "three";

export default {
  // 组件名称
  name: "Demo",
  mounted() {
    this.initThree();
  },
  // 组件方法
  methods: {
    initThree() {
      // 场景
      const scene = new THREE.Scene();
      // 摄像机
      const camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      // 渲染器
      const renderer = new THREE.WebGLRenderer();

      // 定位并将相机指向场景的中心
      camera.position.set(-30, 40, 30);
      camera.lookAt(scene.position);
      // 渲染器底色
      renderer.setClearColor(new THREE.Color(0xeeeeee));
      // 渲染器大小
      renderer.setSize(window.innerWidth, window.innerHeight);
      // 设置渲染器阴影
      renderer.shadowMapEnabled = true;

      // 设置光源
      const spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(-40, 60, -10);
      // 开启阴影功能
      spotLight.castShadow = true;
      // 控制阴影的精细程度
      spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
      spotLight.shadow.camera.far = 130;
      spotLight.shadow.camera.near = 40;
      scene.add(spotLight);

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

      // 旋转和定位平面
      plane.rotation.x = -0.5 * Math.PI;
      plane.position.set(0, 0, 0);
      scene.add(plane);

      // 设置正方体
      const cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
      // MeshLambertMaterial受光源影响
      const cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xff0000
      });
      const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      // 允许物体产生阴影
      cube.castShadow = true;
      cube.position.set(1, 10, 2);
      scene.add(cube);

      scene.fog = new THREE.Fog(0xeeeeee, 0.015, 100);

      // 将渲染器的输出添加到 html 元素
      document.getElementById("WebGL-output").appendChild(renderer.domElement);

      // 渲染场景
      renderer.render(scene, camera);
    }
  }
};
</script>

<style scoped lang="scss"></style>