I'm facing an issue where I can't seem to load an STL file into a three.js scene that is being created via vue-cli.
The project setup involves using vue-cli 'vue init webpack ProjectName', 'cd ProjectName', 'npm install three --save' and replacing the 'HelloWorld' component with this code snippet.
The STL file is located in the same folder as this vue component.
<template>
<div id="container"></div>
</template>
<script>
import * as THREE from 'three'
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
export default {
name: 'ThreeTest',
data() {
return {
cube: null,
renderer: null,
scene: null,
camera: null
}
},
methods: {
init: function() {
this.scene = new THREE.Scene()
this.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(this.renderer.domElement)
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
this.cube = new THREE.Mesh(geometry, material)
var loader = new STLLoader();
loader.load( 'test.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( {
ambient: 0xff5533,
color: 0xff5533,
specular: 0x111111,
shininess: 200 }
);
mesh = new THREE.Mesh( geometry, material );
mesh.position.set(0, 100, 0);
this.scene.add(mesh)
}, undefined, function ( error ) {console.error( error );} );
// this.scene.add(this.cube)
this.camera.position.z = 5
const animate = function() {}
},
animate: function() {
requestAnimationFrame(this.animate)
this.cube.rotation.x += 0.01
this.cube.rotation.y += 0.01
this.renderer.render(this.scene, this.camera)
}
},
mounted() {
this.init()
this.animate()
}
}
</script>
Encountering a black screen with the following error message:
RangeError: Invalid typed array length: 5202511335
at new Float32Array (<anonymous>)
at parseBinary (STLLoader.js?e2c6:199)
at STLLoader.parse (STLLoader.js?e2c6:396)
at Object.eval [as onLoad] (STLLoader.js?e2c6:87)
at XMLHttpRequest.eval
If anyone has any guidance or solutions for this problem, I would greatly appreciate it!
Thank you! :)
Best regards