111

jihongshun

8 天以前 0c741cdda7ef9935a20d3090dfea97e1ce8ae754

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
  <div :id="uuid" style="width: 100%;height:100%;"></div>
</template>
 
<script>
import * as THREE from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
 
export default {
  name: "cpt-three-dom",
  props:{
    width:Number,
    height:Number,
    option:Object
  },
  watch:{
    'option.attribute':{
      handler(newObj) {
        this.reloadOption(newObj);
      },
      deep: true//深度监听
    },
    width(){
      this.renderer.setSize(this.width, this.height);
    },
    height(){
      this.renderer.setSize(this.width, this.height);
    }
  },
  data() {
    return {
      uuid:'',
      camera: null,
      scene: null,
      renderer: null,
      model:null,
      controls:null,
      clock:null,
      mixer:null,
      animate:null
    };
  },
  created() {
    this.uuid = require('uuid').v1();
  },
  mounted() {
    this.initScene();
  },
  methods: {
    reloadOption(attribute){//配置项加载
 
      this.renderer.setClearColor(new THREE.Color( attribute.bgColor ), attribute.bgAlpha);
      this.camera.position.set( attribute.cameraX, attribute.cameraY, attribute.cameraZ );
      //环境光
      const pmremGenerator = new THREE.PMREMGenerator( this.renderer );
      this.scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.02 ).texture;
 
      //控件对象
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.target.set( 0, 0.5, 0 );
      this.controls.enablePan = true;
      this.controls.enableDamping = true;
      this.controls.maxDistance  = 10;
      this.controls.minDistance  = 1;
    },
    initScene() {//初始化
      const that = this;
      let container = document.getElementById(that.uuid);
      //相机
      this.camera = new THREE.PerspectiveCamera( 40, 1, 1, 100 );
 
      //渲染器
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha:true });
      this.renderer.setSize(that.width, that.height);
      this.renderer.setPixelRatio( window.devicePixelRatio );
      this.renderer.outputEncoding = THREE.sRGBEncoding;
      container.appendChild(this.renderer.domElement);
 
      that.clock = new THREE.Clock();
      that.scene = new THREE.Scene();//  创建场景对象Scene
 
      const loader = new GLTFLoader();
      let dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath('/designData/gltf/');
      loader.setDRACOLoader( dracoLoader );
 
      loader.load( '/designData/LittlestTokyo.glb',  (gltf) => {
        that.reloadOption(this.option.attribute);
        that.model = gltf.scene;
        that.model.position.set( 1, 1, 1 );
        that.model.scale.set( 0.01, 0.01, 0.01 );
        that.scene.add( that.model );
        that.mixer = new THREE.AnimationMixer( that.model );
        that.mixer.clipAction( gltf.animations[ 0 ] ).play();
        that.animateRun();
      });
    },
    animateRun() {
      this.animate = requestAnimationFrame(this.animateRun);
      this.model.rotation.y += 0.001;
      const delta = this.clock.getDelta();
      this.mixer.update( delta );
      this.controls.update();
      this.renderer.render(this.scene, this.camera);
    },
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animate);
    this.scene = null;
    this.renderer.clear();
    this.camera = null;
    this.controls.dispose();
  }
}
</script>
 
<style scoped>
 
</style>