vue实现AR全景效果

环境配置为:

通过npm install --save three安装three.js

创建view/div绑定id

引入three.js

export default {

  data() {

    return {

      Scene: null,

      camera: null,

      width: null,

      height: null,

      renderer: null,

      gltf_path: '',

      mixer: null

    }

  },

  created() {

    this.$nextTick(() => {

      this.getARinfo()

      this.init()

      this.initcamera()

      this.initLight()

      var clock = new THREE.Clock();

      let that = this

      var animate = function () {

        requestAnimationFrame( animate );

        var time = clock.getDelta();

        if (that.mixer) {

          that.mixer.update(time);

        }

        that.renderer.render( that.Scene, that.camera );

      };

      animate()

    })

  },

  methods: {

//网络获取gltf模型

    getARinfo() {

      this.gltf_path = 'https://www.****/';

      this.initEarth()

    },

    init() {

      let that = this

      that.Scene = new THREE.Scene();

      that.camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

      //获取容器的宽高

      that.width = window.innerWidth;

      that.height = window.innerHeight;

      that.renderer = new THREE.WebGLRenderer({

        antialias: true,//antialias:true/false是否开启反锯齿

        precision: "highp",//precision:highp/mediump/lowp着色精度选择

        alpha: true,//alpha:true/false是否可以设置背景色透明

        premultipliedAlpha: false,//?

        stencil: false,//?

        preserveDrawingBuffer: true,//preserveDrawingBuffer:true/false是否保存绘图缓冲

        maxLights: 1//maxLights:最大灯光数

      });

      that.renderer.setSize(that.width, that.height );

      document.getElementById('canvas3d').appendChild(that.renderer.domElement);

      //设置canvas背景色(clearColor)和背景色透明度（clearAlpha）

      that.renderer.setClearColor(0x000000,0.5);

    },

    initcamera() {

      let that = this

      that.camera.position.x=35;

      that.camera.position.y=35;

      that.camera.position.z=20;

      var controls = new OrbitControls(that.camera, that.renderer.domElement);

      controls.autoRotate = true;

    },

    initLight() { // 灯光

      let that = this

      //环境光

      that.Scene.add(new THREE.AmbientLight(0x666666));

      var light = new THREE.DirectionalLight();

      //light.position.set(112, 115, 113);

      //light.intensity = 1;

      //light.color.setHex( 0xffffff );

      that.Scene.add(light);

      //点光源

      var point = new THREE.PointLight(0x666666);

      point.position.set(400, 200, 300); //点光源位置

// 通过add方法插入场景中，不插入的话，渲染的时候不会获取光源的信息进行光照计算

      that.Scene.add(point); //点光源添加到场景中

// 点光源2  位置和point关于原点对称

      var point2 = new THREE.PointLight(0x666666);

      point2.position.set(-400, -200, -300); //点光源位置

      that.Scene.add(point2); //点光源添加到场景中

      var point3 = new THREE.PointLight(0x666666);

      point3.position.set(400, 200, -300); //点光源位置

      that.Scene.add(point3); //点光源添加到场景中

      var point4 = new THREE.PointLight(0x666666);

      point4.position.set(400, -200, 300); //点光源位置

      that.Scene.add(point4); //点光源添加到场景中

      var point5 = new THREE.PointLight(0x666666);

      point5.position.set(-400, 200, 300); //点光源位置

      that.Scene.add(point5); //点光源添加到场景中

      var point6 = new THREE.PointLight(0x666666);

      point6.position.set(-400, -200, 300); //点光源位置

      that.Scene.add(point6); //点光源添加到场景中

      var point7 = new THREE.PointLight(0x666666);

      point7.position.set(-400, 200, -300); //点光源位置

      that.Scene.add(point7); //点光源添加到场景中

      var point8 = new THREE.PointLight(0x666666);

      point8.position.set(400, -200, -300); //点光源位置

      that.Scene.add(point8); //点光源添加到场景中

      var spotLight = new THREE.SpotLight( 0x666666 );

      spotLight.position.set( 100, 1000, 100 );

      spotLight.castShadow = true;

      spotLight.shadow.mapSize.width = 1024;

      spotLight.shadow.mapSize.height = 1024;

      spotLight.shadow.camera.near = 500;

      spotLight.shadow.camera.far = 4000;

      spotLight.shadow.camera.fov = 30;

      that.Scene.add( spotLight );

    },

    initEarth() {

      let that = this

      var loder=new GLTFLoader();

      loder.load(that.gltf_path,function (obj) {

        //需要添加的部分

        obj.scene.traverse( function ( child ) {

          if ( child.isMesh ) {

            child.material.emissive =  child.material.color;

            child.material.emissiveMap = child.material.map;

          }

        } );

        //获取模型，并添加到场景

        var model=obj.scene;

        that.Scene.add(model);

        //将模型绑定到动画混合器里面

        that.mixer = new THREE.AnimationMixer( model );

        //同时将这个外部模型的动画全部绑定到动画混合器里面

        for (var i=0;i

          that.mixer.clipAction(obj.animations[i]).play();

        }

      })

    }

  }

}

css