Vue 中的 STLLoader 无法正常工作

Question

我正在尝试使用THREE STLLoader 在我的Vue 场景中渲染一个对象。 （我使用的是Vuetify 框架，但这对于THREE 渲染器的工作应该没有影响。）

我无法弄清楚为什么这不起作用。我有一个在“香草”HTML 和 Javascript（使用 CDN）中工作的 STLLoader，但我似乎无法让它与节点模块一起工作。 （这验证了我尝试渲染的文件没有损坏）

我之前在此页面上还有一个带有旋转立方体的“hello world”示例，以测试基本的THREE 功能。所以我很确定这是我的代码的问题，而不是 THREE 和 Vue 集成的问题。

除了这个，我没有收到任何错误：

STLLoader.js?518e:94 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:84)
    at XMLHttpRequest.eval (three.module.js?5a89:36358)```

这是我当前的代码：

<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "../../node_modules/three/examples/jsm/controls/OrbitControls";
import { STLLoader } from "../../node_modules/three/examples/jsm/loaders/STLLoader";

export default {
  name: "ThreeTest",
  data() {
    return {
      cube: null,
      renderer: null,
      scene: null,
      camera: null,
      raycaster: null,
      mouse: null,
      controls: null,
    };
  },
  methods: {
    init: function () {
      this.raycaster = new THREE.Raycaster();
      this.mouse = new THREE.Vector2();
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xdddddd);
      document.addEventListener("mousemove", this.onMouseMove, false);
      window.addEventListener('resize', this.onWindowResize, false);
      this.camera = new THREE.PerspectiveCamera(
        40,
        window.innerWidth / window.innerHeight,
        1,
        5000
      );

      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document
        .getElementById("container")
        .appendChild(this.renderer.domElement);

      this.camera.rotation.y = (45 / 180) * Math.PI;
      this.camera.position.x = 800;
      this.camera.position.y = 100;
      this.camera.position.z = 1000;

      this.controls = new OrbitControls(this.camera, this.renderer.domElement);

      let light = new THREE.AmbientLight(0xffffff, 5.3);
      this.scene.add(light);

      let light2 = new THREE.PointLight(0xffffff, 1, 10000);
      light2.position.set(0, 300, 500);
      this.scene.add(light2);
      this.controls.update();

      let loader = new STLLoader();
      loader.load("../assets/output.stl", function (geometry) {
        // console.log(gltf);
        var material = new THREE.MeshLambertMaterial({
          color: 0x1313,
          wireframe: false,
          transparent: false,
        });
        var mesh = new THREE.Mesh(geometry, material);
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        mesh.position.set(0, 0, 0);
        mesh.name = "Tjalle's Mesh";
        this.renderer.render(this.scene, this.camera);
        this.scene.add(mesh);
      });
    },
    animate: function () {
      requestAnimationFrame(this.animate);
      //   this.raycaster.setFromCamera(this.mouse, this.camera);
      //   let intersects = this.raycaster.intersectObjects(this.scene.children);
      //   if (intersects.length > 1) {
      //     console.log(intersects[1]);
      //   }

      this.renderer.render(this.scene, this.camera);
    },
    onMouseMove: function (event) {
      this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    },
    onWindowResize: function () {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
  },
  mounted() {
    this.init();
    this.animate();
  },
};
</script>

Answer 1

这最终为我解决了问题：

let me = this;
let loader = new STLLoader();
let mesh = new THREE.Object3D();
loader.load("/three-assets/RobotExpressive.stl", function (geometry) {
  console.log(geometry);
  let material = new THREE.MeshLambertMaterial({
    color: 0x1313,
    wireframe: false,
    transparent: false,
    vertexColors: false,
  });
  mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.x = -0.5 * Math.PI;
  mesh.position.set(0, 0, 0);
  me.scene.add(mesh);
});