three.js 最小环境搭建

news2024/10/5 17:26:47

完整目录:
在这里插入图片描述

1、html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }

      #app {
        width: 100%;
        height: 100%;
      }

    </style>


    <script type="importmap">
    {
      "imports": {
        "three": "./three/three.module.js",
        "three/examples/": "./three/examples/"
      }
    }
  </script>

    <script type="module">
      import * as THREE from 'three'
      import { Stage } from './Stage.js'
      window.THREE = THREE;

      class HelloWorldDemo {
        constructor(stage) {
          this.stage = stage;
          this.addBox(100);
        }

        addBox(size) {
          var geometry = new THREE.BoxGeometry(size, size, size);
          var material = new THREE.MeshBasicMaterial({
            color: 0x63e42a,
            emissive: 0x072534,
            side: THREE.DoubleSide,
          })
          var cube = new THREE.Mesh(geometry, material);
          cube.name = "test_cube"
          this.stage.scene.add(cube);
          return cube;
        }
      }

      window.onload = () => {
        const stage = new Stage("#app", {
          // cameraType: "orthographi"
        });
        stage.run();

        window.stage = stage;
        new HelloWorldDemo(stage);
      };

    </script>

    <div id="app"></div>
  </head>

  <body>
  </body>

</html>

2、Stage.js

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

export class Stage {

  /**
   *
   * @param {*} container
   * @param {*} param
   * @param {* } param.disableControl
   * @param {* } param.cameraType "perspective" / "orthographi"
   * @param {boolean} param.needLight
   */
  constructor(container, param) {
    this.mouse = new THREE.Vector2()
    this.raycaster = new THREE.Raycaster();

    param = param || {}
    param.cameraType = param.cameraType || "perspective"
    param.needLight = param.needLight || true;

    this.fuArr = []
    this.viceCamera = null
    this.tmpTarget = new THREE.Vector3()
    this.orbitControls = null
    this.cameraHelper = null
    this.container = container;
    this.initFlag = false;
    // 场景
    this.scene = new THREE.Scene();
    this.scene.name = "moumade";

    if (param.needLight) {
      // 环境光
      var ambient = new THREE.AmbientLight(0xffffff, 0.5);
      ambient.name = "ambient";
      this.scene.add(ambient);

      let dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
      dirLight.position.set(100, 100, 100);
      dirLight.name = "dirLight";
      this.scene.add(dirLight);
    }


    // 渲染器
    this.containerEle = document.querySelector(container);
    let vW = this.containerEle.clientWidth;
    let vH = this.containerEle.clientHeight;
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: false,
      // preserveDrawingBuffer: true,
      // failIfMajorPerformanceCaveat: true,
    });
    // this.renderer.setClearColor(0x33334c, 1.0);
    this.renderer.setClearColor(0xf8f8f8, 1.0);
    // this.renderer.autoClear = true;
    this.renderer.setSize(vW, vH, false);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    // console.error(vW, vH);

    this.containerEle.appendChild(this.renderer.domElement);
    if (param.cameraType == "perspective") {
      this.camera = new THREE.PerspectiveCamera(45, 1, 1, 500000000)
    } else if (param.cameraType == "orthographi") {
      this.camera = new THREE.OrthographicCamera(-vW / 2, vW / 2, -vH / 2, vH / 2, 0.1, 10000)
    }

    this.camera.lookAt(0, 0, 0)
    this.camera.name = "camera";
    this.scene.add(this.camera);
    this.handleResize = this.handleResize.bind(this)
    this._loop = this._loop.bind(this)
    window.addEventListener("resize", this.handleResize);

    this._isRun = true;
    // window.addEventListener("pointerdown", (event) => {
    //   this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    //   this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    //   this.raycaster.setFromCamera(this.mouse, this.camera)
    //   const intersects = this.raycaster.intersectObjects(this.scene.children);
    //   console.error(intersects[0].point);

    // });
    this.handleResize();
    if (param && param.disableControl) {

    } else {
      this.initControls();
    }
    this.camera.position.set(0, 0, 1000)

    if (!param.disableAxis) {
      // let axis = new THREE.AxesHelper(10000000);
      // this.scene.add(axis);
      // this.axis = axis;
    }


    // @ts-ignore
    // this.stats = new Stats();
    // this.stats.domElement.style.position = 'absolute';
    // this.stats.domElement.style.left = '0px';
    // this.stats.domElement.style.top = '0px';
    // this.stats.domElement.style.width = '100px';
    // this.stats.domElement.id = 'stats';
    // this.containerEle.appendChild(this.stats.dom);

    this._loop()
  }

  initControls() {
    let control = new OrbitControls(this.camera, this.renderer.domElement);
    this.control = control
    // 使动画循环使用时阻尼或自转 意思是否有惯性
    control.enableDamping = true;
    //动态阻尼系数 就是鼠标拖拽旋转灵敏度
    control.dampingFactor = 0.35;
    //是否可以缩放
    control.enableZoom = true;
    control.zoomSpeed = 0.35;
    //是否自动旋转
    control.autoRotate = false;
    //设置相机距离原点的最远距离
    // control.minDistance = 22; //1000
    //设置相机距离原点的最远距离
    // control.maxDistance = 50; //3000
    //是否开启右键拖拽
    // control.enablePan = false;
  }

  handleResize() {
    // 获取新的大小
    let vpW = this.containerEle.clientWidth;
    let vpH = this.containerEle.clientHeight;
    // 设置场景
    this.renderer.domElement.width = vpW;
    this.renderer.domElement.height = vpH;
    this.renderer.setSize(this.containerEle.clientWidth, this.containerEle.clientHeight);
    // 设置相机
    (this.camera).aspect = vpW / vpH;
    this.camera.updateProjectionMatrix();
  }


  run() {
    // this._loop()
    this._isRun = true;
  }

  stop() {
    this._isRun = false;
  }

  addViceCamera(viceCamera) {
    this.viceCamera = viceCamera
  }

  // setRender(v: any) {
  //   this.state = v
  // }
  onUpdate(fu) {
    this.fuArr.push(fu)
  }

  _loop() {
    // this.stats.update()
    this.camera.updateProjectionMatrix();
    this.camera.updateMatrixWorld()
    this._isRun !== false && this.renderer.render(this.scene, this.camera);

    this.fuArr.forEach(fun => {
      fun()
    });
    this.control && this.control.update()
    requestAnimationFrame(this._loop)
  }
}