Javascript 用三个js渲染三维文件

这是我第一次使用three.js，我正在尝试使用three js、vue和laravel显示一个简单的3d模型。三维文件位于/public/files/Tree1.3ds中。如何使用三个js在vue组件中呈现文件。我从三个js官方文档中复制了代码，效果很好，但是如果我直接更改scene.add（）的文件路径，它就不起作用了。谢谢

Vue

<script>
import * as THREE from 'three';
let camera, scene, renderer;
let geometry, material, mesh;
export default {
    methods:{
        init() {
        
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
            camera.position.z = 1;
            scene = new THREE.Scene();
        
            geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
            material = new THREE.MeshNormalMaterial();
        
            mesh = new THREE.Mesh( geometry, material );

            //scene.add( mesh );
            scene.add('http://127.0.0.1:8000/files/Tree1.3ds')   
     
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
        
        },
        animate() {
            requestAnimationFrame( this.animate );
            mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.02;
            renderer.render( scene, camera );
        }
    },
    mounted() {
        this.init()
        this.animate()
    }
   }
</script>

---

您必须使用正确类型的装载机。3ds是一种特定的文件类型，必须使用相应的加载程序文件加载。现在您使用的TextureLoader是用于纹理的

“示例”页面上有一个3ds文件示例

---

第47-49行

您需要使用加载器并在其回调中将对象添加到场景：（检查源代码）检查我的更新问题。谢谢@ChrisGYou需要用于3ds文件的TDSLoader，而不是纹理加载器。我正在使用黑屏

import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader.js';

var loader = new TDSLoader( );
loader.load('http://127.0.0.1:8000/files/Tree1.3ds', function(obj) {
    scene.add( obj );
});