使用 Vue-cli 和 Three.js 加载 STL 文件

Question

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

使用 vue-cli 'vue init webpack ProjectName'、'cd ProjectName'、'npm install three --save' 进行项目设置，并用此代码替换 'HelloWorld' 组件。

stl 文件与此 vue 组件位于同一文件夹中。

<template>
  <div id="container"></div>
</template>
<script>
import * as THREE from 'three'
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

export default {
  name: 'ThreeTest',
  data() {
    return {
      cube: null,
      renderer: null,
      scene: null,
      camera: null
    }
  },
  methods: {
    init: function() {
      this.scene = new THREE.Scene()
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      )

      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      document.body.appendChild(this.renderer.domElement)

      const geometry = new THREE.BoxGeometry(1, 1, 1)
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
      this.cube = new THREE.Mesh(geometry, material)
      var loader = new STLLoader();
            loader.load( 'test.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);
        this.scene.add(mesh)
      }, undefined, function ( error ) {console.error( error );} );
      // this.scene.add(this.cube)

      this.camera.position.z = 5

      const animate = function() {}
    },
    animate: function() {
      requestAnimationFrame(this.animate)

      this.cube.rotation.x += 0.01
      this.cube.rotation.y += 0.01

      this.renderer.render(this.scene, this.camera)
    }
  },
  mounted() {
    this.init()
    this.animate()
  }
}
</script>

不知道为什么黑屏出现这个错误：

RangeError: Invalid typed array length: 5202511335
    at new Float32Array (<anonymous>)
    at parseBinary (STLLoader.js?e2c6:199)
    at STLLoader.parse (STLLoader.js?e2c6:396)
    at Object.eval [as onLoad] (STLLoader.js?e2c6:87)
    at XMLHttpRequest.eval

有人可以帮助我吗？

谢谢！ :)

此致

Answer 1

回答

我安装了最新版本的 vue-cli，它有一个“public”文件夹。我还安装了 hujiulong 的“vue-3d-model”，现在可以正常工作了！ :D

我不知道是什么问题，也许 Vue 在没有 public 文件夹的情况下权限受限？

使用 Vue-cli 和 Three.js 加载 STL 文件

Loading STL files with Vue-cli and Three.js

javascript

stl

three.js

vue-cli

回答