I am encountering an issue where I cannot load an STL file into a three.js scene that is created using vue.js.
The code structure resembles the following:
<template>
<div class="GCodeViewer">
<div id="canvas"></div>
</div>
</template>
<script>
import * as THREE from "three";
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
export default {
name: "GCodeViewer",
data: function() {
return {
show: this.tabs,
scene: null,
renderer: null,
camera: null,
controls: null,
points: [],
lightHolder: null,
height: 0,
object: null,
nozzle: null,
raycaster: null,
mouse: null,
gcode: ""
};
},
methods: {
init() {
var self = this;
var container = document.getElementById("canvas");
this.renderer = new THREE.WebGLRenderer({
clearColor: 0x000000,
clearAlpha: 1
});
var width = (window.innerWidth - 100) / 2;
var height = window.innerHeight / 2;
this.renderer.setSize(width, height);
this.renderer.setClearColor(0xffffff, 1);
container.appendChild(this.renderer.domElement);
//this.raycaster = new THREE.Raycaster();
//this.mouse = new THREE.Vector2();
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x50555f);
var zylinder_mesh = null
var loader = new STLLoader();
loader.load( 'stl/example.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);
self.scene.add(mesh)
}, undefined, function (error){console.error(error);});
console.log(this.scene.children)
this.points.push(new THREE.Vector3(0, 0, 0));
this.camera = new THREE.PerspectiveCamera(40, width / height, 1, 10000);
this.camera.position.y = 250;
this.camera.position.z = 0;
this.camera.position.x = -300;
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
this.scene.add(ambientLight);
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.BasicShadowMap;
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
},
animate() {
this.controls.update();
requestAnimationFrame(this.animate);
this.renderer.render(this.scene, this.camera);
}
}
},
mounted() {
this.init();
this.animate();
//window.addEventListener("mousedown", this.onMouseDown, false);
}
};
</script>
Although everything works fine with creating meshes and adding them to the scene within the init() function, there seems to be an error when attempting to load STL files which suggests that the file may not be found.
GCodeViewer.vue?5fe3:78 RangeError: Invalid typed array length: 6861101076
at new Float32Array (<anonymous>)
at parseBinary (STLLoader.js?518e:196)
at STLLoader.parse (STLLoader.js?518e:393)
at Object.eval [as onLoad] (STLLoader.js?518e:90)
at XMLHttpRequest.eval (three.module.js?5a89:36216)
eval @ GCodeViewer.vue?5fe3:78
eval @ STLLoader.js?518e:96
eval @ three.module.js?5a89:36216
load (async)
load @ three.module.js?5a89:36194
load @ STLLoader.js?518e:86
...
I need assistance in finding a way to correctly load the STL file. Any guidance would be greatly appreciated!
Regards, Dominik