Does THREE.Raycaster perform intersection checks on CSS3DObject objects?

Question

I need to run raycast off mouse coordinates and check for intersections on a group of Three CSS3DObject objects.

Here is the function:

RayCastCheck = function(event, objects){
    var vector = new THREE.Vector3((event.clientX / window.innerWidth)*2 - 1, -(event.clientX / window.innerHeight )*2 + 1, 0.5);
    new THREE.Projector().unprojectVector( vector, camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects(objects);
    console.log(intersects.length);
};

The objects argument is an array of css3dobjects. I am able to use similar function to target drops on the scene to the correct mouse location so I believe my calculation of the mouse point in world space is correct. This led to believe that the Raycaster is does not check intersections on css3dobjects.

My css3dobjects are typically constructed with a div as its element.

createObject = function(){
  var element = document.createElement("div");    
  var obj = new THREE.CSS3DObject(element);
  scene.add(obj);
}

My scene is created via this function

//global
var scene;
var camera;
var renderer;

createScene = function(){
    camera = new THREE.PerspectiveCamera( 75, 400 / 600, 1, 1000 );
    camera.position.z = 500;
    scene = new THREE.Scene();
    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(400, 600);
$(#body).appendChild(renderer.domElement);
}

Do I have all the required elements in the scene to enable raycasting?

Is it possible to perform raycasting on css3dobjects with the css3drenderer?

Thank you for your help

br4nnigan br4nnigan · Accepted Answer · 2014-01-31T17:28:19

You can just use the usual events with the dom elements. You can even get the relative coordinates:

var x = e.offsetX==undefined?e.layerX:e.offsetX;
var y = e.offsetY==undefined?e.layerY:e.offsetY;

Does THREE.Raycaster perform intersection checks on CSS3DObject objects?

2 Answers