vue集成three.js加载模型

本文主要是介绍vue集成three.js加载模型，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、安装插件
npm install three --save-dev
npm install three three-orbitcontrols
npm install three three-obj-mtl-loader stats-js

2、

<template>
      <div id="container"></div>
</template>

<script>
  import * as Three from 'three'
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
  import {OBJLoader, MTLLoader} from 'three-obj-mtl-loader';
  import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

  export default {
    name: 'ThreeTest',
    data () {
      return {
        camera: null,
        scene: null,
        renderer: null,
        mesh: null
      }
    },
    methods: {
      init(){
        let container = document.getElementById('container')
        this.camera = new Three.PerspectiveCamera(30, container.clientWidth / container.clientHeight, 0.1, 10000)
        this.camera.position.z = 5;
        this.camera.position.y = 5;
        this.camera.position.x = 15;
        this.scene = new Three.Scene()
        // this.addGeometry();
        this.modelGlb();
        this.modelObj('./static/3d/d101bd996ac67f1b5d56ef45612d3b865bcbc362/','SciFiCrossBridge.mtl','SciFiCrossBridge.obj');
        this.renderer = new Three.WebGLRenderer({antialias: true})
        this.renderer.setSize(container.clientWidth, container.clientHeight)
        this.renderer.setClearColor(0xC0C4CC, 1);
        this.backImg();
        container.appendChild(this.renderer.domElement)      
        this.OrbitControl(container);
      },

      addGeometry(){
        let geometry = new Three.BoxGeometry(0.1, 0.1, 0.1)
        let material = new Three.MeshNormalMaterial()
        this.mesh = new Three.Mesh(geometry, material)
        this.scene.add(this.mesh)
      },
      modelGlb(){
        let ts = this;
        const loader = new GLTFLoader();
        loader.load( './static/3d/Soldier.glb', function ( gltf ) {
          ts.scene.add( gltf.scene );
        }, undefined, function ( error ) {
          console.error( error );
        });
      },
      modelObj(path,mtl,obj){
       let ts = this;
        var mtlLoader = new MTLLoader();
        mtlLoader.setPath(path);
        mtlLoader.load(mtl, function(materials) {
        materials.preload();
        var objLoader = new OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath(path);
        objLoader.load(obj, function(object) {
        object.children[0].geometry.computeBoundingBox();
        object.children[0].geometry.center()
        object.rotation.x = Three.Math.degToRad( 90 );
        object.position.y = 1;
        ts.scene.add(object);
    },onProgress,onError);
});
        let onProgress = function(xhr) {
          if (xhr.lengthComputable) {
              var percentComplete = xhr.loaded / xhr.total * 100;
              console.log(Math.round(percentComplete, 2) + '% downloaded');
          }
        };
        let one rror = function(xhr) {};
      },
   
      animate(){
        requestAnimationFrame(this.animate)
        // this.mesh.rotation.x += 0.01
        // this.mesh.rotation.y += 0.02
        this.renderer.render(this.scene, this.camera)
      },
      OrbitControl(container){
          this.controls = new OrbitControls(this.camera, container );
          this.controls.enableDamping = true;
          this.controls.enableZoom = true;
          this.controls.autoRotate = true;
          // this.controls.minDistance = 200;
          // this.controls.maxDistance = 600;
          this.controls.enablePan = true;

      },
      light(){
        var ambient = new Three.AmbientLight(0xffffff);
        this.scene.add(ambient); //将环境光

        // var light = new Three.DirectionalLight(0xF08080);
        // this.scene.add(light); //平行光

        // var pointLight = new Three.PointLight(0xffffff);
        // pointLight.position.set(300,300,300);
        // this.scene.add(pointLight);//点光源

        // var spotLight = new Three.SpotLight(0xFFFFFF, 1, 100);
        // spotLight.position.set(-40, 30, -10);
        // spotLight.castShadow = true;
        // this.scene.add(spotLight);//聚光灯
      },
      backImg(){
        var textureLoader = new Three.TextureLoader();
        var texture = textureLoader.load('./static/img/bjt2.jpeg');
        this.scene.background = texture ;      
      }      
    },
    mounted () {
      this.init()
      this.light()
      this.animate()
    },
  }
</script>
<style scoped>
  #container {
    width: 100%;
    height: 1000px;
  }
</style>

这篇关于vue集成three.js加载模型的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！