Javascript 在Vue mounted（）中加载带有三个.js的STL文件

我目前的问题是无法将STL文件加载到通过vue.js创建的three.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>

从“三”中导入*作为三；
从'three/examples/jsm/loaders/STLLoader.js'导入{STLLoader}；
从“three/examples/jsm/controls/OrbitControls.js”导入{OrbitControls}；
导出默认值{
名称：“GCodeViewer”，
数据：函数（）{
返回{
show:this.tabs，
场景：空，
渲染器：null，
摄像机：空，
控件：null，
要点：[]，
灯座：空，
高度:0,，
对象：null，
喷嘴：空，
雷卡斯特：空，
鼠标：空，
gcode:“
};
},
方法：{
init（）{
var self=这个；
var container=document.getElementById（“画布”）；
this.renderer=new THREE.WebGLRenderer({
clearColor:0x000000，
clearAlpha:1
});
变量宽度=（window.innerWidth-100）/2；
var height=window.innerHeight/2；
this.renderer.setSize（宽度、高度）；
this.renderer.setClearColor（0xffffff，1）；
container.appendChild（this.renderer.doElement）；
//this.raycaster=新的三个.raycaster（）；
//this.mouse=new THREE.Vector2（）；
this.scene=新的三个.scene（）；
this.scene.background=新的三种颜色（0x5055F）；
var zylinder_mesh=null
var loader=新的STLLoader（）；
loader.load（'stl/example.stl'，函数（几何体）{
var材料=新的三种材料。网状材料（{
环境温度：0xff5533，
颜色：0xff5533，
镜面反射：0x111111，
光泽度：200}
);
网格=新的三个网格（几何体、材质）；
网格位置设置（0,100,0）；
self.scene.add（网格）
}，未定义，函数（错误）{console.error（error）；}）；
console.log（this.scene.children）
这个.points.push（新的3.Vector3（0,0,0））；
this.camera=新的三视角摄像机（40，宽/高，11000）；
此.camera.position.y=250；
这个.camera.position.z=0；
this.camera.position.x=-300；
这个.camera.lookAt（新的3.Vector3（0,0,0））；
var环境光=新的三个环境光（0xffffff，0.5）；
this.scene.add（环境光）；
this.renderer.shadowMap.enabled=true；
this.renderer.shadowMap.type=THREE.BasicShadowMap；
this.controls=新的轨道控件（this.camera、this.renderer.doElement）；
},
制作动画（）{
this.controls.update（）；
requestAnimationFrame（this.animate）；
this.renderer.render（this.scene，this.camera）；
}
}
安装的（）{
this.init（）；
这个。动画（）；
//addEventListener（“mousedown”，this.onMouseDown，false）；
}
};

在init（）函数中创建网格并将其添加到场景中时，一切正常。但是，加载stl文件时会出现以下错误（这表明无法找到该文件）

GCodeViewer.vue？5fe3:78范围错误：键入的数组长度无效：686101076
在新的Float32Array（）上
在parseBinary上（STLLoader.js？518e:196）
在STLLoader.parse（STLLoader.js？518e:393）
at Object.eval[作为onLoad]（STLLoader.js？518e:90）
在XMLHttpRequest.eval（three.module.js？5a89:36216）
eval@GCodeViewer.vue？5fe3:78
eval@STLLoader.js？518e:96
eval@three.module.js？5a89:36216
加载（异步）
加载@three.module.js？5a89:36194
加载@STLLoader.js？518e:86
...

我想知道如何找到正确加载stl文件的方法。 任何帮助都将不胜感激

致意 多米尼克

试试这个：

纱线添加反应脚本

rm-射频节点单元模块/

纱线

（可选）如果上述操作无效，请将节点从版本12降级到版本10

解决方案

---

我将.stl文件移到了公用文件夹中。在那之后，我可以用base_url/example导入它。stl

当您将它拖放到中时是否显示stl？是的，stl显示正确。在这种情况下，问题似乎在应用程序级别。您能否使用浏览器的开发工具确保您的后端实际提供STL文件？有时会出现类似的问题，因为web服务器确实返回无效的HTTP响应（如HTML页面）。我认为使用devtools无法找到文件（在“源”选项卡下）。我的建议是webpack不会将其与vue组件捆绑在一起，即使它与./stl/example.stl下的vue组件“GCodeViewer”位于同一子目录中。我建议您发布解决方案作为答案。添加react脚本并重新安装所有节点模块并不能解决问题。我没有试过4。然而

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