Three.js 模型渲染问题：看不到 Object 模型的原因和解决方法

<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) => {
      object.position.set(0, 0, 0);
      out.add(object);
    });

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

    animate();
  }
}
</script>
<style scoped>
</style>
<p>代码中的object模型看不到是因为没有设置相机和灯光的位置和方向，以及没有调整渲染器的大小。</p>
<p>在代码中，相机的 位置是 <code>camera.position.set(0, 0, 100);</code>，可以尝试调整相机的位置，使其能够看到object模型。</p>
<p>另外，灯光的 位置是 <code>ambientLight.position.set(0, 0, 0);</code> 和 <code>pointLight.position.set(0, 0, 0);</code>，可以尝试调整灯光的位置和方向，以便照亮object模型。</p>
<p>最后，渲染器的大小是通过 <code>renderer.setSize(window.innerWidth, window.innerHeight);</code> 来设置的，可以尝试调整渲染器的大小，使其能够显示整个object模型。</p>
<p>通过调整相机、灯光和渲染器的设置，可以使object模型能够正确显示出来。</p>