javascript - Three.js - How to check if an object is visible to the camera - Stack Overflow

admin管理员组

文章数量:1402844

I'm having hard times figuring out what's the best way to check if a Object3d is visible for the eyes of the camera.

I'm having a sphere in the middle of the screen. Some cubes are added on it's surface randomly. What I would need is a way to check which cubes are visible (on the front half of the sphere) and which one are invisible (on the back half of the sphere) for the eyes of the camera.

What I have found so far seems to be the right direction - but I must be missing something with the THREE.Raytracer class.

Here is a fiddle of the code that I'm using: jsfiddle. I have tried to make it as clear as possible.

This part of the fiddle might contain the buggy code:

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 is hidden behind the bigger sphere object
    intersects = raycaster.intersectObject(pointMesh);
    // this is always empty - should contain objects that are located on the back of the sphere ...
    console.log(intersects);
}); 

Frustum Culling is not working as outlined in this stack overflow question here: post1

Also this post2 and this post3 are explaining the topic really good but not quite for this situation.

Thank you for you help!

I'm having hard times figuring out what's the best way to check if a Object3d is visible for the eyes of the camera.

I'm having a sphere in the middle of the screen. Some cubes are added on it's surface randomly. What I would need is a way to check which cubes are visible (on the front half of the sphere) and which one are invisible (on the back half of the sphere) for the eyes of the camera.

What I have found so far seems to be the right direction - but I must be missing something with the THREE.Raytracer class.

Here is a fiddle of the code that I'm using: jsfiddle. I have tried to make it as clear as possible.

This part of the fiddle might contain the buggy code:

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 is hidden behind the bigger sphere object
    intersects = raycaster.intersectObject(pointMesh);
    // this is always empty - should contain objects that are located on the back of the sphere ...
    console.log(intersects);
}); 

Frustum Culling is not working as outlined in this stack overflow question here: post1

Also this post2 and this post3 are explaining the topic really good but not quite for this situation.

Thank you for you help!

• javascript
• three.js

Share Improve this question Follow edited May 23, 2017 at 12:15 CommunityBot 111 silver badge asked Mar 11, 2014 at 8:27 hetschhetsch 1,58822 gold badges1313 silver badges2727 bronze badges 3

• Any luck on this? We're trying that now, and using raycaster.intersectObjects (plural) to no avail, although it DOES gives us a hit when our camera physically runs into the blocking object. Raycaster.intersectObject (singular) always gives us nothing. – Alien Life Form Commented Jul 28, 2014 at 20:16
• What worked for me in an other situation was using the recursive parameter of intersectObjects(toTest, true). I have totally overlooked that parameter. – hetsch Commented Jul 30, 2014 at 7:34
• see stackoverflow./questions/29758233/… – Martin Commented Jan 23, 2019 at 14:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You want to look at Occlusion Culling techniques. Frustum culling works fine and is not what you are describing. Frustum culling just checks if an object (or its bounding box) is inside the camera pyramid. You perform Occlusion culling in addition to Frustum Culling specially when you want to eliminate objects which are occluded by other objects inside the view frustum. But it is not an easy task.

I just worked though a similar problem where I was trying to detect when a point in world space passed out of view of the camera and behind specific objects in the scene. I created a jsfiddle, (see below) for it. When the red "target" passes behind any of the three "walls" a blue line is drawn from the "target" to the camera. I hope this helps.

本文标签： javascriptThreejsHow to check if an object is visible to the cameraStack Overflow