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

Question

我目前遇到的问题是我无法将 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>

在 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 -rf node_modules/
3. 纱线
4. （可选）如果上述方法不起作用，请将您的节点从版本 12 降级到版本 10