slibra-module-web/src/views/screen/3d/renderModel.js

import * as THREE from 'three'//导入three.js核心库
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' //导入轨道控制器
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';

class motor3d {
  constructor(selector) {
    this.container = document.querySelector(selector)
    this.scene
    this.camera
    this.renderer
    this.controls
    this.init()
    this.animate()
  }

  init() {
    // 初始化场景
    this.initScene()
    // 初始化辅助轴
    this.initAxesHelper()
    // 初始化灯光
    this.initLight()
    // 初始化Mesh
    this.initMesh()
    // 初始化相机
    this.initCamera()
    // 初始化渲染器
    this.initRender()
    // 初始化轨道控制器
    this.initControls()
    // 监听场景大小改变，重新渲染尺寸
    window.addEventListener('resize', this.onWindowResize.bind(this))
  }

  initScene() {
    this.scene = new THREE.Scene()
    // this.scene.background = new THREE.Color(0xa0a0a0)
    this.scene.background = null;
  }

  initAxesHelper() {
    const axesHelper = new THREE.AxesHelper(5)
    this.scene.add(axesHelper)
  }

  initLight() {
    const hesLight = new THREE.HemisphereLight(0xffffff, 0.5)
    hesLight.intensity = 1
    this.scene.add(hesLight)

    const dirLight = new THREE.DirectionalLight()
    dirLight.position.set(10, 10, 10).normalize();
    this.scene.add(dirLight)
  }
  recordCameraChanges() {
    // 记录位置
    const position = this.camera.position;
    console.log(`Position: (${position.x}, ${position.y}, ${position.z})`);
  };
  initMesh() {
    this.addOBJFModel()
  }
  initCamera() {
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
    // this.camera.position.set(3.5, 5.5, 1.5)
    // this.camera.position.set(28.07, 22.32, -12.92)
    // this.camera.position.set(37.3642, 24.8315, -22.6927)
    // this.camera.position.set(24.5564, 16.6944, -9.8434)
    this.camera.position.set(20.47294749946306, 25.9193717746894, -10.426531907485199)

  }

  initRender() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })//设置抗锯齿
    // this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
    // this.renderer.toneMappingExposure = 1; 
    //设置屏幕像素比
    this.renderer.setPixelRatio(window.devicePixelRatio)
    //渲染的尺寸大小
    this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight)
    // 添加到容器
    this.container.appendChild(this.renderer.domElement)
    // 设置清除颜色的 Alpha 为 0
    this.renderer.setClearColor(0xffffff, 0)

    this.renderer.outputEncoding = THREE.sRGBEncoding;
  }

  animate() {
    this.renderer.setAnimationLoop(this.render.bind(this))
  }
  render() {
    this.renderer.render(this.scene, this.camera)
  }
  initControls() {
    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
  }
  // 加载模型
  addOBJFModel(modelName) {
    return new Promise((resolve, reject) => {
      const mtlLoader = new MTLLoader()
      const objLoader = new OBJLoader()
      const gltfLoader = new GLTFLoader();
      
      gltfLoader.load('/factory.glb', (gltf) => {
        const model = gltf.scene;
        // console.log("glb 加载成功", gltf)

        model.position.set(-4, 10, 0); // 设置模型位置
        // model.rotation.set(0, Math.PI / 0, 0); // 设置模型旋转
        // model.scale.set(1, 0.5, 1); // 设置模型缩放

        this.scene.add(model);

      },(xhr) => {
        console.log(xhr);
      }, (error) => {
        console.log(error);
      })

      const rgbeLoader = new RGBELoader();
      rgbeLoader.load('/clarens_night_02_8k.hdr', (texture) => {
        texture.mapping = THREE.EquirectangularReflectionMapping;
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LineasrFilter;
        // texture.format = THREE.RGBEFormat;

        this.scene.environment = texture;

        // texture.mapping = THREE.EquirectangularReflectionMapping;
        // texture.encoding = THREE.LinearEncoding;
        // this.scene.environment = texture;
      }, undefined, (error) => {
          console.error('An error happened.', error);
      });

      // mtlLoader.load('./texture.mtl', (mtl) => {
      //   mtl.preload();

      //   objLoader.setMaterials(mtl);

      //   objLoader.load('./factory.obj', (obj) => {
      //     obj.position.set(0, 10, 0);
      //     var material = new THREE.MeshStandardMaterial({ color: '#fff' });
      //     obj.traverse(function (child) {
      //       console.log(child.name);
      //     //   if (child instanceof THREE.Mesh) {
      //     //     for (let i = 0; i < child.material.length; i++) {
      //     //       child.material[i].color.set(0xffffff); // 设置材质颜色为白色
      //     //   }
      //         // child.material = material;
      //         // if (child.material instanceof THREE.MeshStandardMaterial ||
      //         //   child.material instanceof THREE.MeshPhongMaterial) {
      //         //     child.material.color.set('#fff');
      //         // }
      //     // }
      //     })
      //     this.scene.add(obj)
      //     resolve('模型添加成功')
      //   })
      // })

    })
  }

  onWindowResize() {
    this.recordCameraChanges();
    this.camera.aspect = this.container.offsetWidth / this.container.offsetHeight
    this.camera.updateProjectionMatrix()//更新矩阵，将3d内容投射到2d画面上转换
    this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight)
  }

  dispose() {
    this.scene.dispose();
    this.camera.dispose();
    this.renderer.dispose();
    this.controls.dispose();
    window.removeEventListener('resize', this.onWindowResize);
  }

}
export default motor3d;