Actualmente tengo el problema de que no puedo cargar un archivo STL en una escena three.js que se crea a través de vue-cli.

Configuración del proyecto con vue-cli 'vue init webpack ProjectName', 'cd ProjectName', 'npm install three --save' y reemplace el componente 'HelloWorld' con este código.

Stl archivo está en la misma carpeta que este componente 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>

No sé por qué tengo una pantalla negra con este error:

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

Alguien me puede ayudar ?

¡Gracias! :)

Saludos

0
Gabriel 24 feb. 2021 a las 13:11

1 respuesta

La mejor respuesta

Responder

Instalé la última versión de vue-cli que tiene una carpeta "pública". ¡También instalé "vue-3d-model" de hujiulong y ahora está funcionando bien! :D

No sé cuál fue el problema, ¿tal vez Vue haya restringido el permiso sin una carpeta pública?

0
Gabriel 11 mar. 2021 a las 10:59