标签：vue container scene Three three var new 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,container,scene,Three,three,var,new,js
来源： https://www.cnblogs.com/-llf/p/14753828.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。