Exploring three.js for the first time and experimenting with displaying a basic 3D model using three js, Vue, and Laravel. The 3D file can be found at /public/files/Tree1.3ds. Need help rendering the file in the Vue component with three js. Initially tried copying code from the official three js docs and it worked fine, but encountered issues when attempting to directly change the file path within scene.add(). Any insights are appreciated. Thanks!
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>
UPDATE
Switched loader types but facing an issue of getting an empty scene.
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 );
});