- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我感觉这种方法是完全错误的,因为我无法让我的网站获得适当的性能。
这是我希望您看到的主要代码:
onDocumentMouseMove( event ) {
if ( this.isUserInteracting === true ) {
this.lon = ( this.onMouseDownMouseX - event.clientX ) * 0.1 + this.onMouseDownLon;
this.lat = ( event.clientY - this.onMouseDownMouseY ) * 0.1 + this.onMouseDownLat;
}
this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
if( !this.state.VR ){
this.raycaster.setFromCamera( this.mouse, this.camera );
var intersects = this.raycaster.intersectObjects( this.indicatorHotspotPlane );
if( intersects.length > 0 ) {
this.actualIntersect = intersects[0];
$('html,body').css('cursor', 'pointer');
if(!intersects[ 0 ].object.isAction){
this.marker.material.opacity = 1;
this.marker.lookAt( intersects[ 0 ].face.normal );
this.marker.position.copy( intersects[ 0 ].point );
this.marker.position.y = this.marker.position.y + 30;
if( intersects[ 0 ].point.x >= 0 ){
this.marker.position.x = this.marker.position.x - 30;
}else{
this.marker.position.x = this.marker.position.x + 30;
}
}
} else {
this.actualIntersect = null;
$('html,body').css('cursor', 'move');
this.marker.material.opacity = 0;
}
}
}
我相信在这种事件处理程序中运行 raycaster.intersectObjects 是一个非常昂贵的操作。
如果我评论这段代码,一切都会运行良好。
是否有其他方法可以在鼠标移动时找到交叉点而不会出现性能问题?
this.indicatorHotspotPlane 是一个数组,其中可能有 5 个像这样的对象:
var hotspotPlane = new THREE.Mesh( new THREE.PlaneBufferGeometry( hotpot.width , hotpot.height ) );
我的场景包含这些对象和一个带有纹理的球体几何体。
最佳答案
这里发生了什么:
这样做仍然有成本:每次需要刷新渲染目标时,您都会产生额外的渲染。此外,如果您的场景非常大(渲染需要很长时间),它的性能可能与光线转换一样差。尽管如此,这个故事的寓意是,从缓冲区读取颜色值比执行光线转换要容易得多。
另一个需要注意的是,这仅适用于最接近的形状(相当于 intersects[0]
)。这是因为被遮挡的形状不会暴露其颜色(它们的颜色完全被其他形状覆盖)。因此,如果您需要获取鼠标下的所有形状,那么光线转换仍然是最佳选择。
其他信息:
我忽略了你的部分代码并直接跳到解决光线跟踪问题。经过更深入的审查后,这里有一些额外的信息:
看起来您正在获取相交的任何对象,并检查特定属性:
if(!intersects[ 0 ].object.isAction){
使用上述方法,您可以检查从颜色图中获得的任何对象上的该属性。
要获得交点,您需要执行光线转换,但现在只有当鼠标下方的对象首先通过测试时才会发生这种情况,而不是每次鼠标移动时都会发生。
当光标位于适当的对象上时,每次鼠标移动事件都会发生光线转换,因此您可能需要重新考虑需要更新标记的频率(可能每 N 帧),或者也许仅在第一次遇到特定形状时才设置标记。我不知道你的用例,所以也许这不可行。
关于javascript - 三个JS raycaster,随着鼠标移动找到交叉点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48691642/
我正在准备数据库关系的自动文档。该工具是graphviz。我的问题是输出图像上节点的放置不是最佳的,并且有许多不必要的边缘交叉。 是否有任何方法可以执行图形的优化,以便结果将具有最小边交叉(交叉)?
如何判断圆和矩形在二维欧几里得空间中是否相交? (即经典的二维几何) 最佳答案 这是我的做法: bool intersects(CircleType circle, RectType rect) {
切换到 Aframe 的主版本后,光线转换器相交事件似乎变为空,尽管我保留了完全相同的代码: 使用注册组件: AFRAME.registerComponent('collider-check', {
就效率而言,Strassen 算法应该停止递归并应用乘法的最佳交叉点是多少? 我知道这与具体的实现和硬件密切相关,但对于一般情况应该有某种指南或某人的一些实验结果。 在网上搜索了一下,问了一些他们认为
我正在尝试使用 jquery 来切换某些类的显示属性(打开和关闭)。 我正在尝试在图像和下面的文本之间切换,以在点击时切换 Charity Run
我创建了一张 map ,其中每 1/4 分钟绘制一次纬度和经度线。生成的框称为“刻钟分钟”。我需要给每个刻钟框贴上标签。标签应该是盒子内西南 Angular 的纬度/经度。由于我先绘制可视区域内的所有
我只需要一种方法来告诉我轴对齐的 3D 边界框是否与线段(不是射线)相交。我不需要交点。 盒子由两个对角定义,线段由起点和终点定义,如下所示: Boolean intersection(Vector3
我是一名优秀的程序员,十分优秀!