luoshiwen
/
BarracksData
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
luoshiwen 2023-05-16 09:33:18 +08:00
parent eee0a6090f
commit 875259a945
3 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/video/11.mp4 Normal file
View File

Binary file not shown.

13
src/components/Three.vue
View File

@ -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>

19
src/view/Index.vue
View File

@ -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%;