在 Vue mounted() 中使用 THREE.js 加载 STL 文件

Question

我目前遇到的问题是我无法将 STL 文件加载到通过 vue.js 创建的三.js场景中。

代码如下所示：

<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>

在 init(( 函数中创建网格并将它们添加到场景中时，一切正常。但是，加载 stl 文件会给我以下错误(这表明找不到该文件(

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
...

我有点需要找到一种正确加载 stl 文件的方法。 任何帮助将不胜感激！

此致敬意 多米尼克

Answer 1

解决方案

我将 .stl 文件移动到公用文件夹中。之后，我能够使用 base_url/example.stl 导入它

Answer 2

试试这个：

1. 纱线添加反应脚本
2. RM -射频 node_modules/
3. 纱
4. (可选(如果上述方法没有帮助，请将节点从版本 12 降级到版本 10