一、three.js地图-初始化

1. 库安装

• 指令

    yarn add three -S

• 安装完成在package.json文件中会多出dependencies节点

  {
    "dependencies": {
      "three": "^0.140.2"
    }
  }

2. three.ts 初始化

• 新建ThreeBase.js 封装相关初始化代码

  import * as THREE from 'three';
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
  
  export default class ThreeBase {
  
    scene; // 场景
    camera; // 相机
    renderer; // 渲染器
  
    constructor() {
      this.init()
    }
  
    /**
     * 初始化渲染场景
     */
    initRenderer() {
      // antialias 是否开启反锯齿，设置为 true 开启反锯齿
      this.renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.append(this.renderer.domElement);
    }
  
    /**
     * 初始化相机
     */
    initCamera() {
      const width = window.innerWidth; // 窗口宽度
      const height = window.innerHeight; // 窗口高度
      const k = width / height; // 窗口宽高比
      const s = 10; // 三维场景显示范围控制系数，系数越大，显示的范围越大
  
      // 透视投影相机 PerspectiveCamera
      // far 可视角度
      // aspect 为 width/height 通常设置为 canvas 元素的高宽比
      // near 近端距离 far 远端距离
      this.camera = new THREE.PerspectiveCamera(s, k, 1,1000);
      // 向上的一个坐标系
      // this.camera.up.x = 0;
      // this.camera.up.y = 0;
      // this.camera.up.z = 1;
      this.camera.position.set(100, 100, 100);
      // this.camera.lookAt(0, 0, 0)
      // this.camera.position.set(50, 50, 50);
      this.camera.lookAt(this.scene.position);
    }
  
    /**
     * 初始化场景
     */
    initScene() {
      this.scene = new THREE.Scene();
    }
  
    /**
     * 动画
     */
    animate() {
      requestAnimationFrame(this.animate.bind(this));
      this.renderer.render(this.scene, this.camera);
    }
  
    /**
     * 初始化网格模型
     */
    initObj ()  {
      const geometry = new THREE.BoxGeometry(10, 10, 10);
      const material = new THREE.MeshNormalMaterial();
      const mesh = new THREE.Mesh(geometry, material);
      this.scene.add(mesh);
    }
  
    /**
     * 初始化光源
     */
    initLight() {
      const point = new THREE.PointLight(0xffffff);
      // 点光源位置
      point.position.set(400, 200, 300);
      // 点光源添加到场景中
      this.scene.add(point);
      // 环境光
      const ambient = new THREE.AmbientLight(0x444444);
      this.scene.add(ambient);
    }
  
    /**
     * 渲染
     */
    render() {
      this.animate()
    }
  
    /**
     * 辅助器
     * 红色x, 绿色y, 蓝色z
     */
    setAxesHelper() {
      const axesHelper = new THREE.AxesHelper(5);
      this.scene.add(axesHelper)
    }
  
    /**
     * 鼠标操作
     */
    setOrbitControls() {
      // 创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      controls.update();
    }
  
    /**
     * 网格辅助器
     */
    setGridHelper() {
      //  200表示网格模型的尺寸大小，25表示纵横细分线条数量
      const gridHelper = new THREE.GridHelper(200, 25);
      this.scene.add(gridHelper)
    }
  
    /**
     * 初始化three.js
     */
    init() {
      this.initRenderer();
      this.initScene();
      this.initCamera();
      this.initLight();
      this.initObj();
      this.setAxesHelper();
      this.setGridHelper();
      this.render();
      this.setOrbitControls();
    }
  }

• 最终效果