Threejs基础入门篇

安装&使用

安装：
npm install --save three
使用：
import * as THREE from 'three';

入门Three.js的第一步，就是认识场景Scene、相机Camera、渲染器Renderer三个基本概念

1.三维场景Scene

 const width = 600;
 const height = 600;
// 创建场景
const scene = new THREE.Scene();

2.相机 Camera

      //   创建相机
      const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      // 相机位置xyz坐标：200, 200, 200
      camera.position.set(200, 200, 200);

3.渲染器 Renderer

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(600, 600);
      document.body.appendChild(renderer.domElement);

通过上面，实现了一个基本的三维场景，下面再添加一个物体，为了方便先增加一个三维坐标系来方便我们查看

2.三维坐标系

 // 坐标系 颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴
      const axesHelper = new THREE.AxesHelper(500);
      scene.add(axesHelper);

3.物体形状 Geometry

      // 创建几何体
      const geometry = new THREE.BoxGeometry(100, 60, 20);

3-1.物体材质 Material

 // MeshLambertMaterial材质对光源敏感，MeshBasicMaterial不受光源影响，为后续方便展示光源Linght的影响，采用MeshLambertMaterial方法
 const material = new THREE.MeshLambertMaterial({
        color: 0xffc0cb ,
      });

3-2.三维网格模型Mesh

Geometry形状和Material材质组合起来创建一个网络模型，也就是我们试图所看见的物体

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 网格模型位置xyz坐标：0,10,0
mesh.position.set(100, 100, 100);

渲染场景

如果将之前写好的代码复制到文件中，你不会在页面中看到任何东西。这是因为我们还没有对它进行真正的渲染。为此，我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

你会看见一个黑色的东西在这块，之所以因为黑色是因为如果没有光照或者光照不足，物体会呈现暗黑色。需要添加光源并将它放置在物体的可见区域中，以确保物体得到适当的光照。

4.相机控件OrbitControls

平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果

// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’;

const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
controls.addEventListener('change', function () {
    // 浏览器控制台查看相机位置变化
    console.log('camera.position',camera.position);
});


ps:animate方法里面也要更新controls.update();
 function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
      }

5.光源Light

实际生活中物体表面的明暗效果是会受到光照的影响，比如晚上不开灯，你就看不到物体，灯光比较暗，物体也比较暗。在threejs中，咱们用网格模型Mesh模拟生活中物体，所以threejs中模拟光照Light对物体表面的影响，就是模拟光照Light对网格模型Mesh表面的影响。

      // 光源 点光源：两个参数分别表示光源颜色和光照强度
      const pointLight = new THREE.PointLight(0xffffff, 1.0);
      pointLight.intensity = 1.0; //光照强度
      //点光源位置
      // pointLight.position.set(400, 100, 100); //点光源放在x轴上
      pointLight.position.set(400, 200, 300);
      pointLight.decay = 0.0; //设置光源不随距离衰减，如果不设置默认是随着距离衰减的，效果展示会不一样
      scene.add(pointLight); //点光源添加到场景中

上图讲光源展示在三维坐标中间，

转换物体角度变成X轴方向看，开启pointLight.position.set(400, 100, 100); //点光源放在x轴上，展示将会如下：
为了方便查看可以给界面加入一个网格辅助工具

const size = 1000;
      const divisions = 10;

      const gridHelper = new THREE.GridHelper(size, divisions, '#ffffff', '#ffffff');
      scene.add(gridHelper);

6.描边

  // 描边
      // 创建后处理对象EffectComposer，WebGL渲染器作为参数
      const composer = new EffectComposer(renderer);
      // 创建一个渲染器通道，场景和相机作为参数
      const renderPass = new RenderPass(scene, camera);
      // 设置renderPass通道
      composer.addPass(renderPass);
      // OutlinePass第一个参数v2的尺寸和canvas画布保持一致
      const v2 = new THREE.Vector2(width, height);
      const outlinePass = new OutlinePass(v2, scene, camera);
      outlinePass.selectedObjects = [...points];
      // 设置OutlinePass通道
      composer.addPass(outlinePass);
      outlinePass.pulsePeriod = 2;
       function animate() {
        composer.render();
        requestAnimationFrame(animate);
        controls.update();
        // renderer.render(scene, camera);
      }

7.可视化工具dat.GUI

通过可视化工具，可以在视图上更改数据的时候，界面也会跟随变化
安装： npm i dat.gui

initGui(camera) {
      const gui = new dat.GUI();
      const obj = {
        myx: 0,
        myy: 0,
        myz: 2000
      };
      gui.add(obj, 'myx').onChange(e => {
        camera.position.x = e;
      });
      gui.add(obj, 'myy').onChange(e => {
        camera.position.y = e;
      });
      gui.add(obj, 'myz').onChange(e => {
        camera.position.z = e;
      });
    }