Three.js：将物体置于立方体中心点位置

<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 geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    // 设置正方体的位置为原点
    cube.position.set(0, 0, 0);
    // 将正方体添加到场景中
    scene.add(cube);

    const out = new THREE.Object3D();
    const objLoader = new OBJLoader();
    objLoader.load('./obj/船体.obj', (object) => {
      out.add(object);
      // 将物体的位置设置为cube的中心点位置
      object.position.set(0, 0, 0);
      // 将物体添加到场景中
      scene.add(out);
    });

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

    animate();
  }
}
</script>
<style scoped>
</style>