1

我需要从鼠标坐标运行光线投射并检查一组三个 CSS3DObject 对象上的交叉点。

这是功能：

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);
};

objects 参数是一个数组css3dobjects。我可以使用类似的功能将场景中的水滴定位到正确的鼠标位置，因此我相信我对世界空间中鼠标点的计算是正确的。这导致人们相信 Raycaster 不会检查交叉路口css3dobjects。

我的 css3dobjects 通常以 div 作为其元素来构造。

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

我的场景是通过这个函数创建的

//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);
}

场景中是否拥有启用光线投射所需的所有元素？

是否可以使用 raycasting 进行光线css3dobjects投射css3drenderer？

谢谢您的帮助

4

2 回答 2

0

您可以将通常的事件与 dom 元素一起使用。你甚至可以得到相对坐标：

var x = e.offsetX==undefined?e.layerX:e.offsetX;
var y = e.offsetY==undefined?e.layerY:e.offsetY;
于 2014-01-31T17:28:19.390 回答
0

在 css3dobjects 上使用 Raycaster 将不起作用。至少这是我想出来的。

看一下three.js r76 line 8933。里面有css3dobject的“raycast”函数的定义。它是空的，所以它没有被实现，因此当然也不会工作。可能在另一个版本上。也需要这个功能

仍然没有在 r78 中实现。

于 2016-06-16T07:39:42.303 回答