CODEWITHSUNDEEP
javascriptthree.jsstlvue-cli
Gabriel
Gabriel

Reputation: 25

Loading STL files with Vue-cli and Three.js

I currently have the problem that I am not able to load a STL file into a three.js scene which is created via vue-cli.

Project setup with vue-cli 'vue init webpack ProjectName', 'cd ProjectName', 'npm install three --save' and replace the 'HelloWorld' component with this code.

stl file is on the same folder as this vue component.

<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>

I don't know why I have a black screen with this 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

Can someone help me ?

Thanks! :)

Regards

Upvotes: 0

Views: 541

Answers (1)

Gabriel
Gabriel

Reputation: 25

Answer

I installed the last version of vue-cli which have a "public" folder. I also installed "vue-3d-model" by hujiulong and now it's working fine! :D

I don't know what was the issue, maybe Vue have restricted permission without a public folder ?

Upvotes: 1

Related Questions