Function init

public/iframe/lib/js/mixinsThree.js:105–263

()

            renderer.render(scene, camera);
          },
          init () {
            const that = this
            this.scene = null
            this.objects = []
            const felidView = 40;
            const height = document.getElementById(this.id).clientHeight;
            const width = document.getElementById(this.id).clientWidth;
            const aspect = width / height;
            const nearPlane = 1;
            const farPlane = 10000;
            const WebGLoutput = document.getElementById('container');

            this.scene = new THREE.Scene();
            this.camera = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
            this.camera.position.z = 3000;

            this.renderer = new THREE.CSS3DRenderer();
            this.renderer.setSize(width, height);
            this.renderer.domElement.style.position = 'absolute';
            WebGLoutput.appendChild(this.renderer.domElement);

            this.controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);

            this.controls.rotateSpeed = 1;
            this.controls.staticMoving = true;
            this.controls.minDistance = 500;
            this.controls.maxDistance = 6000;
            this.controls.addEventListener('change', this.render);

            let i = 0;
            const len = this.option.data.length;

            for (; i < len; i++) {

              const element = document.createElement('div');
              element.className = 'element';
              element.dataset.index = i
              element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
              element.onclick = () => {
                if (element.dataset.isScale === 'true') {
                  element.style.transform = element.dataset.oldTransform // 恢复备份
                  element.dataset.isScale = false
                } else {
                  element.dataset.isScale = true
                  element.dataset.oldTransform = element.style.transform // 备个份
                  element.style.transition = '1s'
                  element.style.transform = `translate(-50%, -50%) matrix3d(8, 0, 0, 0, 0, -8, 0, 0, 0, 0, 8, 0, 0, 0, 1000, 1)`
                }

              }

              const symbol = document.createElement('div');
              symbol.className = 'symbol';
              symbol.textContent = this.option.data[i];
              element.appendChild(symbol);

              const object = new THREE.CSS3DObject(element);
              object.position.x = Math.random() * 4000 - 2000;