Load .obj model in vue js with nuxt

Resources
, , ,
1

1.most importantly, your model should be in the folder ‘static’
2 install npm i --save three-obj-mtl-loader

here code

<template>
  <div class="animation">
  </div>
</template>


<script>
  import * as THREE from 'three';
import {MTLLoader, OBJLoader} from 'three-obj-mtl-loader'
  
  export default{
    mounted(){

      var camera, pos, controls, scene, renderer, geometry, geometry1, material;
   let vm = this;

      function init() {
        scene = new THREE.Scene();
        let mtlLoader = new MTLLoader();
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        let objLoader = new OBJLoader();
        scene.background = new THREE.Color(0x000000);

        renderer = new THREE.WebGLRenderer();

       
        objLoader.load('/gos_opt2.obj',function(mesh) {
              scene.add(mesh)
              console.log('mesh')
        });

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerWidth);
        
       
        var container = vm.$el;
        container.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(70,window.innerWidth / window.innerHeight, 0.001, 500);
        camera.position.set( 0, 0, 4 );
        resize();
          

       
      }


      function resize() {
        var w = window.innerWidth;
        var h = window.innerHeight;
        renderer.setSize( w, h );
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
      }

      
      function animate() {
        requestAnimationFrame(animate);
        render();
      }

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

<style>
  .animation{
    position: fixed;
  }
</style>