Vue Three.js 3D 场景渲染 - 使用天空盒和 OBJ 模型

这段代码是一个使用 Three.js 库创建并渲染一个带有天空盒纹理的 3D 场景的 Vue 组件。具体的功能包括：

1. 创建一个场景、相机和渲染器。
2. 调整相机位置。
3. 加载并设置天空盒纹理。
4. 创建和添加一个半球光源。
5. 创建和添加一个轨道控制器，用于控制相机的旋转和缩放。
6. 加载一个 OBJ 模型文件，并将其放置在场景中心。
7. 开始渲染循环，将场景渲染到屏幕上。

这段代码中的环境颜色被设置为黑色，因为在场景创建时设置了scene.background = new THREE.Color(0x040b1a);。

<template>
  <div ref="canvas"></div>
</template>

<script>
import * as THREE from 'three';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { CubeTextureLoader } from 'three';

export default {
  mounted() {
    // 创建场景、相机和渲染器
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x040b1a);
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000000);
    camera.position.set(0, 0, 100); // 调整相机位置

    // 创建天空盒纹理
    const loader = new CubeTextureLoader();
    const texture = loader.load([
      './skybox/right.jpg',
      './skybox/left.jpg',
      './skybox/top.jpg',
      './skybox/bottom.jpg',
      './skybox/front.jpg',
      './skybox/back.jpg'
    ]);
    scene.background = texture;

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.canvas.appendChild(renderer.domElement);

    renderer.antialias = true;
    renderer.toneMapping = THREE.FXAAShader;
    renderer.setPixelRatio(window.devicePixelRatio);

    const hemisphereLight = new THREE.HemisphereLight(0x87CEEB, 0x000000, 1); // 参数分别是天空颜色、地面颜色、光照强度
    scene.add(hemisphereLight);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;

    const out = new THREE.Object3D();

    const mtlLoader = new MTLLoader();
    const objLoader = new OBJLoader();

    objLoader.load('./obj/船体.obj', (object) => {
      object.position.set(0, 0, 0);
      // 创建一个BoundingBox计算对象
      const box = new THREE.Box3().setFromObject(object);
      // 获取模型的中心点
      var center = box.getCenter(new THREE.Vector3());
      object.translateX(-center.x);
      object.translateY(-center.y);
      object.translateZ(-center.z);
      console.log(center); // 打印模型的中心点

      out.add(object);
      scene.add(out);
    });

    // 开始渲染循环
    function animate() {
      requestAnimationFrame(animate);
      // 渲染到屏幕上
      renderer.render(scene, camera);
    }

    animate();
  }
}
</script>

<style scoped>
</style>