首页 > 其他分享 >threejs-css2dObject操作之物体遮挡标签后应该隐藏,而不是出现透视效果

threejs-css2dObject操作之物体遮挡标签后应该隐藏,而不是出现透视效果

时间:2023-06-09 17:57:15浏览次数:30  
标签:threejs const 标签 value element css2dObject 遮挡 classList wavesLabel

先看coding之前的效果:

 这些在背面的标签的,转到一定角度,被模型遮挡后,理论上就不应该被看到。这才是比较符合实际的

coding之后(另一侧对称点就被隐藏):

 具体代码(j借助于光线投影):

// 绑定鼠标事件,当用户移动视角后触发()
function bindRayShotEvent() {
    document.addEventListener('mouseup', () => {
        if (clusterOf2D.value.length > 0) {
            clusterOf2D.value.forEach((c: any) => {
                raycasterCollsionDetect(c)
            })
        }
    })
}
function raycasterCollsionDetect(wavesLabel: CSS2DObject) {
    const labelPosition = wavesLabel.position.clone()
    //计算出标签和相机之前的距离(需要看备份一下坐标,不然执行下面转换NDC坐标后,计算会不准)
    const labelDistance = labelPosition.distanceTo(camera.value.position)
    //转换 向量到从世界空间投影到相机的标准化坐标(NDC)
    labelPosition.project(camera.value)
    raycaster.setFromCamera(labelPosition, camera.value)
    let model = scene!.children.filter(v => {
        return v instanceof THREE.Group
    })
    //过滤出模型
    if (model.length == 1) {
        const intersects = raycaster.intersectObjects(model[0].children)
        if (intersects.length == 0) {
            // 如果标签没有被model遮挡,应该全部显示
            wavesLabel.element.classList.add('visible')
        } else {
            const minDistance = intersects[0].distance
            if (minDistance < labelDistance) {
                // 如果模型到相机的距离小于标签到相机的距离,说明光线射线先经过模型
                // 表面此时标签其实在模型的后面,应该被遮挡而看不见
                wavesLabel.element.classList.remove('visible')
                wavesLabel.element.classList.add('hidden')
            } else {
                wavesLabel.element.classList.add('visible')
                wavesLabel.element.classList.remove('hidden')
            }
        }
    }

}

 

标签:threejs,const,标签,value,element,css2dObject,遮挡,classList,wavesLabel
From: https://www.cnblogs.com/Hijacku/p/17469894.html

相关文章

  • 使用THREEJS实现一个可调节档位、可摇头的电风扇
    夏天到了,用Three.js实现一个可以摇头和调节档位的电风扇。主要使用到Blender处理3D模型,用Vite+Typescript搭建项目框架。效果演示:一、处理模型1、从爱(bai)给(gei)网下载一个风扇的3D模型,在Blender中打开,给模型贴上图。2、拆解模型。将风扇模型拆解成按钮、底座、扇叶、头部......
  • threejs绘制多边形几何体
    threejs绘制多边形 //创建一个立方体几何体varcubeGeometry=newTHREE.BoxGeometry(0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5);//创建一个多边形几何体varpolygonGeometry=newTHREE.Geometry();//创建多边形的顶点数......
  • threejs绘制平面多边形
    在Three.js中,可以使用geometry对象和geometryMaterial对象来创建和渲染多边形几何体。下面是一个绘制多边形平面的示例代码: //创建一个立方体几何体varcubeGeometry=newTHREE.BoxGeometry(0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5);......
  • webgl 渲染带透明通道的视频(threeJS)
    首先,你需要一个这样的视频 或者一个这样的视频 webgl渲染可以用three.js,上下叠加的代码如下:import*asTHREEfrom'three';letvideoWidth=540;//视频实际的宽度letvideoHeight=540;//原视频实际的高度的一般//定义渲染器varrenderer=new......
  • threejs绘制球体
    threejs绘制球体在Three.js中,可以使用geometry对象和geometryMaterial对象来创建和渲染球体几何体。下面是一个绘制球体的示例代码://创建一个立方体几何体varcubeGeometry=newTHREE.BoxGeometry(0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5);......
  • 锚点定位滚动之 scrollIntoView,定位的锚点内容被遮挡
    问题描述:点击‘蓝色’框里的内容,‘绿色’框里面的内容滚动到可试区域内,由于‘红色’搜索框的原因,’绿色‘要展示的可视区域被搜索框的内容遮挡。原来的布局:解决:让滚动区也以fixed做呈现,top值定为顶部区域的高度即可不被遮挡;给class="bottom"的标签添加‘position:fixed;top:52......
  • threejs创建圆柱体
    threejs创建圆柱体 创建一个几何体(geometry):使用Three.js的几何体类创建一个几何体,该类将定义您的几何体的形状和大小。例如,您可以使用以下代码创建一个圆柱体:vargeometry=newTHREE.CylinderGeometry(5,32,32); 这将创建一个高度为5、半径为32的圆柱体。创建......
  • 【Antd 】selsect 的 option 选项随页面滚动,或被遮挡解决办法
    <divstyle={{padding:100,height:1000,background:'#eee',position:'relative'}}id="area"><h4>可滚动的区域/scrollablearea</h4><SelectdefaultValue="lucy"style={......
  • Cypress 踩坑记 - DOM 遮挡
    Cypress是一个非常流行的测试工具,然而实际使用过程中发现一些问题,这里做些记录。问题发现在Cypress下click是非常常用的指令,然而在一些特殊场景下click并不能如想象中那般正常工作。比如现在有一个弹窗,我们需要测试在点击遮罩层时是否可以正常关闭弹窗。测试代码比......
  • threejs webgl性能优化
    threejswebgl性能优化WEBGL性能优化的方法有很多,以下是一些常见的方法:减少渲染次数:在WEBGL中,渲染次数越少,性能越好。因此,您可以通过减少渲染次数来提高性能。例如,使用批处理技术将多个对象合并为一个批处理对象进行渲染。降低纹理分辨率:纹理分辨率越高,渲染的时间就越长。......