用三个js渲染3D文件

Question

这是我第一次使用three.js，我试图用三个js、vue和laravel来显示一个简单的3d模型。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>

更新

改变了装载机的类型，但我得到的只是一个空场景。

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

Answer 1

必须使用正确的加载程序类型。3ds是一个特定的文件类型，必须与适当的加载程序文件一起加载。现在，您使用的是一个用于纹理的TextureLoader。

示例页代码第47 - 49行上有一个3ds文件的示例。