public-fuse/src/core/Scene.js

import * as THREE from "three";
import Stats from "three/examples/jsm/libs/stats.module.js";
import Player from "./player/Player.js";
import BoxManager from "./box/BoxManager.js";

const stats = new Stats();

export default class Scene {
  constructor(domElement) {
    this.domElement = domElement;
    this.scene = null;
    this.renderer = null;
    this.orthCamera = null;
    this.player = null;

    this.width = 0;
    this.height = 0;
    this.inited = false;

    this.init = () => {
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xf0f2f5);
      this.renderer = new THREE.WebGLRenderer({
        canvas: this.domElement,
        antialias: true,
      });

      this.width = this.domElement.clientWidth;
      this.height = this.domElement.clientHeight;
      this.renderRes = window.devicePixelRatio;

      this.renderer.setSize(this.width, this.height);
      this.renderer.setPixelRatio(this.renderRes);
      console.log(this.width, this.height, this.renderRes);

      this.orthCamera = new THREE.OrthographicCamera(
        -this.width / 2,
        this.width / 2,
        this.height / 2,
        -this.height / 2,
        0.1,
        1000
      );
      this.orthCamera.zoom = 250;

      this.orthCamera.position.set(0, 10, 0);
      this.orthCamera.lookAt(0, 0, 0);
      // this.orthCamera.setViewOffset(this.width, this.height, 0, 0);
      this.orthCamera.updateProjectionMatrix();
      //player
      this.player = new Player(this);

      //stats
      domElement.parentNode.appendChild(stats.dom);
      stats.dom.style.pointerEvents = "none";
      stats.dom.style.left = "15%";

      this.onBindEvent();

      this.inited = true;
      this.load();
      this.animate();
    };
  }

  load = (list, type) => {
    if (!list) return;
    console.log("scene: ", list, type);
    //axesHeloer
    this.clearScene();
    const axesHelper = new THREE.AxesHelper(1);
    this.scene.add(axesHelper);
    this.boxManager = new BoxManager(this);
    this.boxManager.load(list, type);
    //light
    this.loadLight();
  };

  clearScene() {
    for (var i = this.scene.children.length - 1; i >= 0; i--) {
      let obj = this.scene.children[i];
      this.scene.remove(obj);
    }
  }
  loadLight = () => {
    const light = new THREE.AmbientLight(0xffffff, 1.5); // 柔和的白光
    this.scene.add(light);
  };

  setCamera = () => {};

  toHorizontal = () => {};

  toVertical = () => {};

  onResize = (width, height) => {
    this.width = width !== undefined ? width : this.domElement.clientWidth;
    this.height = height !== undefined ? height : this.domElement.clientHeight;
    console.log("resize", this.width, this.height);

    (this.orthCamera.left = -this.width / 2),
      (this.orthCamera.right = this.width / 2),
      (this.orthCamera.bottom = -this.height / 2),
      (this.orthCamera.top = this.height / 2),
      this.orthCamera.updateProjectionMatrix();

    this.renderer.setSize(this.width, this.height);
  };
  render = () => {
    if (this.player) {
      this.player.update();
      this.renderer.render(this.scene, this.orthCamera);
    }
  };
  animate = () => {
    stats.begin();
    this.render();
    stats.end();
    requestAnimationFrame(this.animate);
  };

  onBindEvent = () => {
    //window.addEventListener('resize', this.onResize)
  };
}