我一直在开发一个应用程序,three.js但我遇到了这个问题,我似乎无法找到任何解决方案.我想根据相机当前瞄准的位置确定哪些网格现在可见,因此我可以刷新我的对象(数据来自服务)或不取决于它们是否显示在视口上.
我THREE.js在CANVAS模式下使用(我已经找到了一个使用WebGL的解决方案,说明是否渲染了对象,但我需要CANVAS用于此项目).
我一直在试图找出是否three.js以某种方式设置属性以指示对象是否可见(当前在屏幕上,而不是整个3D世界),但我找不到它.网格物体具有可见的属性,但即使相机不针对该物体,它也始终为真.
我很难弄清楚什么是检查相机眼睛是否可以看到Object3d的最佳方法.
我在屏幕中间有一个球体.一些立方体随机添加在其表面上.我需要的是一种方法来检查哪些立方体是可见的(在球体的前半部分),哪一个是不可见的(在球体的后半部分)用于相机的眼睛.
到目前为止我发现的似乎是正确的方向 - 但我必须错过THREE.Raytracer类的东西.
这是我正在使用的代码的小提琴:jsfiddle.我试图让它尽可能清楚.
这部分小提琴可能包含错误的代码:
var raycaster = new THREE.Raycaster();
var origin = camera.position, direction, intersects, rayGeometry = new THREE.Geometry(), g;
pointGroup.children.forEach(function(pointMesh) {
direction = pointMesh.position.clone();
// I THINK THIS CALCULATION MIGHT BE WRONG - BUT DON'T KNOW HOW TO CORRECT IT
raycaster.set(origin, direction.sub(origin).normalize());
// if the pointMesh's position is on the back half of the globe, the ray should intersect with globe first and the hit the point as second target - because the cube …我有一个球体(球体),表面上有物体(针脚),DOM元素(标签)是从针位置到2d世界的计算结果.
我的问题是,当引脚位于地球后面时(使用鼠标拖动或动画),我需要隐藏DOM中的标签,以便在没有引脚的情况下看不到文本标签.
我的逻辑是,如果我能得到3D世界中的引脚告诉我它是否在地球后面,那么我可以隐藏与引脚相关的标签.
Codepen与整个代码.
我一起研究的功能:
function checkPinVisibility() {
var startPoint = camera.position.clone();
for (var i = 0; i < pins.length; i++) {
var direction = pins[i].position.clone();
var directionVector = direction.sub(startPoint);
raycaster.set(startPoint, directionVector.clone().normalize());
var intersects = raycaster.intersectObject(pins[i]);
if (intersects.length > 0) {
// ?
}
}
}
我已经通过很多帖子进行了研究,但无法真正得到所需的结果:
我已经通过鼠标XY位置作为光线工作,但是无法真正获得所有引脚的恒定渲染的工作解决方案.