Three.js 模型加载与渲染：在原点创建正方体模型

这段代码使用 Three.js 库创建了一个正方体模型，并在原点处进行渲染。

首先，在'mounted'生命周期钩子函数中创建了场景（'scene'）、相机（'camera'）和渲染器（'renderer'），并设置了背景颜色、相机位置和投影矩阵。

然后，创建了环境光（'ambientLight'）和点光源（'pointLight'），并添加到场景中。

接着，创建了轨道控制器（'controls'）用于控制相机的旋转和缩放。

然后，创建了一个空的'Object3D'对象（'out'），以便将加载的模型添加到其中。

接下来，使用'MTLLoader'加载材质文件，并使用'OBJLoader'加载模型文件。在加载完成后，将模型添加到'out'对象中，并将'out'对象添加到场景中。

最后，使用'requestAnimationFrame'函数创建了一个渲染循环，将场景和相机渲染到屏幕上。

注意：代码中的模型路径'./obj/船体.obj'需要根据实际情况进行修改，确保能够正确加载模型文件。

<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';

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, 1000);
    camera.position.set(0, 0, 100); // 调整相机位置
    camera.lookAt(0, 0, 0);
    camera.near = 1; // 调整近裁剪面
    camera.far = 10000; // 调整远裁剪面
    camera.updateProjectionMatrix(); // 更新相机投影矩阵

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

    let ambientLight = new THREE.AmbientLight(0xffffff, 2, 0);
    ambientLight.position.set(0, 0, 0);
    scene.add(ambientLight);

    let pointLight = new THREE.PointLight(0xffffff, 1, 0);
    pointLight.position.set(0, 0, 0);
    scene.add(pointLight);

    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);

      object.traverse((child) => {
        if (child instanceof THREE.Mesh) {
          // 计算模型的中心点位置
          let center = new THREE.Vector3();
          // child.geometry.computeBoundingBox();
          // child.geometry.boundingBox.getCenter(center);
          // child.geometry.translate(-center.x, -center.y, -center.z);
          console.log(center);
        }
      });
      out.add(object);
    });

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

    animate();
  }
}
</script>

<style scoped>
</style>