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

Posted 2023-02-23

【中文标题】使用 Vue-cli 和 Three.js 加载 STL 文件

【英文标题】：Loading STL files with Vue-cli and Three.js

【发布时间】：2021-05-26 15:29:06

【问题描述】：

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

有人可以帮我吗？

谢谢！ :)

问候

【问题讨论】：

您能否通过浏览器的开发控制台从后端实际加载一个 STL 文件（而不是 html）？有时，用户将资产放入错误的目录，从而导致服务不正确。

你能解释一下我如何验证我实际加载了一个 stl 文件吗？我是网络开发新手，所以我没有所有技巧：/。我在 init 函数的开头放置了一个运行良好的 console.log("Model") （它不在这篇文章中，因为我是在之后做的）。

【参考方案1】：

回答

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

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