three.js修改bug，增加video播放

src/components/Three.vue

@@ -41,7 +41,7 @@ renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
 controls = new OrbitControls(camera, renderer.domElement)
 // controls.maxPolarAngle = 20*Math.PI
 controls.maxDistance = 1000
-controls.minDistance = 400
+controls.minDistance = 200
 // controls.minAzimuthAngle = 100 * Math.PI;
 // controls.maxAzimuthAngle = 100 * Math.PI;
 controls.minPolarAngle = 0;
@@ -126,6 +126,7 @@ function createRender() {
     console.log(renderer);
     document.querySelector('#three3D').appendChild(renderer.domElement)
     labelRenderer = new CSS3DRenderer();
+    console.log(labelRenderer,'渲染');
     labelRenderer.setSize(window.innerWidth, window.innerHeight);
     labelRenderer.domElement.style.position = "absolute";
     labelRenderer.domElement.style.top = 0;
@@ -133,6 +134,7 @@ function createRender() {
     labelRenderer.domElement.style.pointerEvents = "none";
     labelRenderer.domElement.className = "allLabel";
     document.querySelector('#three3D').appendChild(labelRenderer.domElement);
+    console.log(document.querySelector('#three3D'));
     initIcon()
 }
 async function initIcon() {
@@ -162,20 +164,22 @@ async function initIcon() {
             },
         },
     ];
+    
     pointList.forEach((item, index) => {
-        console.log(item, 'item');
         let initIconAble
         if (item.name == '警报') {
             initIconAble = createLableObj(item.name, item.point, 'area-alert.png');
         } else {
             initIconAble = createLableObj(item.name, item.point, `store.png`);
         }
+        console.log(initIconAble,'xxx');
         scene.add(initIconAble);
     });
 }
 // 创建标签的方法
 function createLableObj(text, vector, url) {
-    let laberDiv = document.createElement("div"); //创建div容器
+    let laberDiv = document.createElement("div"); 
+    //创建div容器
     laberDiv.className = "laber_name";
     // laberDiv.textContent = text;
     laberDiv.innerHTML = `
@@ -185,15 +189,18 @@ function createLableObj(text, vector, url) {
             </span>
             </div>
         `;
+        console.log(laberDiv,'div容器');
     let pointLabel = new CSS3DObject(laberDiv);
     pointLabel.scale.set(0.1, 0.1, 0.1);
     pointLabel.position.set(vector.x, vector.y + 15, vector.z);
+    console.log(pointLabel,'3dtuduix');
     return pointLabel;
 }
 function animate() {
     controls.update()
     requestAnimationFrame(animate);
     renderer.render(scene, camera);
+    labelRenderer.render(scene,camera)
 }
 
 </script>

src/view/Index.vue

@@ -145,7 +145,7 @@
                             v-for="(item, index) in areaAlarm" :key="index">
                             <div class="video">
                                 <div class="video-item">
-
+                                    <video id="video" controls src="../assets/video/11.mp4"></video>
                                 </div>
                             </div>
                             <div class="message">
@@ -332,7 +332,7 @@ export default {
         let alarmItemHeight = ref(0)
 
 
-        
+
         onMounted(() => {
             let dom = document.querySelector('.alarmPlate')
 
@@ -344,12 +344,21 @@ export default {
                 alarmItemHeight.value = dom.clientHeight * 0.94 / 3
                 console.log(alarmItemHeight.value);
             })
-            
+
+            //video继承父元素宽高
+
+
+            nextTick(() => {
+                let video = document.querySelector('#video')
+                console.log(video.parentNode.offsetWidth, video.parentNode.parentNode.offsetHeight, 'xxx');
+                video.style.height = video.parentElement.clientHeight + 'px'
+                video.style.width = video.parentElement.clientWidth + 'px'
+            })
 
         })
 
         const methods = {
-            
+
             getColor(state) {
 
                 if (state == '正常') {
@@ -841,7 +850,7 @@ export default {
                         width: 100%;
                         height: 100%;
                         box-sizing: border-box;
-                        padding: .2rem;
+                        // padding: .2rem;
                         // background-color: #03bcc2;
                         background-image: url('../assets/images/area-bg.png');
                         background-size: 100% 100%;