Question

我需要在鼠标坐标上运行raycast并检查一组三个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);
}

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

是否可以使用css3dobjects在css3drenderer上执行光线投射？

感谢您的帮助

Answer 1

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

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

Answer 2

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

看一下three.js r76 8933行。有css3dobject的“raycast”功能的定义。它是空的，因此它没有实现，因此当然不会起作用。可能还有一个版本。也需要这个功能

仍未在r78中实现。

THREE.Raycaster是否对CSS3DObject对象执行交叉检查？

2 个答案: