Threejs，了解raycaster的intersectd对象坐标答案

【问题标题】：Threejs, understanding raycaster's intersectd object coordinatesThreejs，了解raycaster的intersectd对象坐标
【发布时间】：2018-08-29 19:29:32
【问题描述】：

您好，我有一个疑问：

我已经实现了一个光线投射器，并且一直在手动测试它，但是我不知道为什么在我对 3D 模型进行的大多数点击中，它没有得到交点。

首先我将向您展示我单击的点，然后是在 Web 控制台中记录的点，然后是我实现的代码，最后是 Web 结构：

我点击了那八点：

结果是：

[]length: 0__proto__: Array(0)
[]length: 0__proto__: Array(0)
[]length: 0__proto__: Array(0)
[]length: 0__proto__: Array(0)
point: Vector3 x:--99.34871894866089 y:67 z:0
point: Vector3 x: -126.50880038786315 y: 73.48094335146214 z: -5.684341886080802
[]length: 0__proto__: Array(0)
[]length: 0__proto__: Array(0)

这里我们已经实现了代码，重要的部分是onDocumentMouseDown函数：

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

// global variables for this scripts
let OriginalImg, 
    SegmentImg;

var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var mousePressed = false;



init();
animate();


// initilize the page
function init ()
{
    let filename = "models/nrrd/columna01.nrrd"; // change your nrrd file
    let idDiv = 'original';
    OriginalImg = new InitCanvas(idDiv, filename );
    OriginalImg.init();
    console.log(OriginalImg);

    filename = "models/nrrd/columnasegmentado01.nrrd"; // change your nrrd file
    idDiv = 'segment';
    SegmentImg = new InitCanvas(idDiv, filename );
    SegmentImg.init(); 
}

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );

function onDocumentMouseDown( event ) {
    mousePressed = true;
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse.clone(), OriginalImg.camera );
    var objects = raycaster.intersectObjects(OriginalImg.scene.children);
    console.log(objects);
}
function onDocumentMouseUp( event ) { mousePressed = false}





function animate() {


    requestAnimationFrame( animate );
    OriginalImg.animate();
    SegmentImg.animate();


}

这里我们看到了网络结构：

我怀疑由于画布在窗口中存在偏移，因此无法有效地从我们单击的区域获取点。

我也看过：

Debug threejs raycaster mouse coordinates

How do I get the coordinates of a mouse click on a canvas element?

https://threejs.org/docs/#api/core/Raycaster

threejs raycasting does not work

如果提供进一步阅读、理论建议和代码示例的链接，我们将不胜感激。

编辑：

1) 我打开了一个具有相同主题和更详细图像、图表和日志的新线程。这是链接：ThreeJS, raycaster gets strange coordinates when we log the intersection object

2) 我按照@TheJim01 提供的答案，这里是当前代码：

逻辑.js

if (!Detector.webgl) Detector.addGetWebGLMessage();

// global variables for this scripts
let OriginalImg,
    SegmentImg;

var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var mousePressed = false;
var clickCount = 0;


init();
animate();


// initilize the page
function init() {
    let filename = "models/nrrd/columna01.nrrd"; // change your nrrd file
    let idDiv = 'original';
    OriginalImg = new InitCanvas(idDiv, filename);
    OriginalImg.init();
    console.log(OriginalImg);

    filename = "models/nrrd/columnasegmentado01.nrrd"; // change your nrrd file
    idDiv = 'segment';
    SegmentImg = new InitCanvas(idDiv, filename);
    SegmentImg.init();
}

let originalCanvas = document.getElementById('original');
originalCanvas.addEventListener('mousedown', onDocumentMouseDown, false);
originalCanvas.addEventListener('mouseup', onDocumentMouseUp, false);


function onDocumentMouseDown(event) {
    mousePressed = true;

    clickCount++;


    mouse.x = ( event.offsetX / window.innerWidth ) * 2 - 1;
    console.log('Mouse x position is: ', mouse.x, 'the click number was: ', clickCount);
    mouse.y = -( event.offsetY / window.innerHeight ) * 2 + 1;
    console.log('Mouse Y position is: ', mouse.y);
    raycaster.setFromCamera(mouse.clone(), OriginalImg.camera);
    var objects = raycaster.intersectObjects(OriginalImg.scene.children);
    console.log(objects);
}

function onDocumentMouseUp(event) {
    mousePressed = false
}


function animate() {


    requestAnimationFrame(animate);
    OriginalImg.animate();
    SegmentImg.animate();


}

InitCanvas.js

// this class handles the load and the canva for a nrrd
// Using programming based on prototype: https://javascript.info/class
// This class should be improved:
//   - Canvas Width and height

InitCanvas = function ( IdDiv, Filename ) {


    this.IdDiv = IdDiv;
    this.Filename = Filename
}

InitCanvas.prototype = {

    constructor: InitCanvas,

    init: function() {

        this.container = document.getElementById( this.IdDiv );

        // this should be changed.
        debugger;
        this.container.innerHeight = 600;
        this.container.innerWidth = 800;

        //These statenments should be changed to improve the image position
        this.camera = new THREE.PerspectiveCamera( 60, this.container.innerWidth / this.container.innerHeight, 0.01, 1e10 );
        this.camera.position.z = 300;

        let scene = new THREE.Scene();
        scene.add( this.camera );

        // light

        let dirLight = new THREE.DirectionalLight( 0xffffff );
        dirLight.position.set( 200, 200, 1000 ).normalize();

        this.camera.add( dirLight );
        this.camera.add( dirLight.target );


        // read file

        let loader = new THREE.NRRDLoader();
        loader.load( this.Filename , function ( volume ) {

            //z plane
            let sliceZ = volume.extractSlice('z',Math.floor(volume.RASDimensions[2]/4));

            debugger;
            this.container.innerWidth = sliceZ.iLength;
            this.container.innerHeight = sliceZ.jLength;

            scene.add( sliceZ.mesh );
        }.bind(this) );


        this.scene = scene;

        // renderer

        this.renderer = new THREE.WebGLRenderer( { alpha: true } );
        this.renderer.setPixelRatio( this.container.devicePixelRatio );
        debugger;
        this.renderer.setSize( this.container.innerWidth, this.container.innerHeight );

        // add canvas in container
        this.container.appendChild( this.renderer.domElement );

    },

    animate: function () {

        this.renderer.render( this.scene, this.camera );
    }

}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Prototype: three.js without react.js</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/styles.css">

        <!-- load the libraries and js -->
        <script src="js/libs/three.js"></script>

        <script src="js/Volume.js"></script>
        <script src="js/VolumeSlice.js"></script>
        <script src="js/loaders/NRRDLoader.js"></script>

        <script src="js/Detector.js"></script>
        <script src="js/libs/stats.min.js"></script>
        <script src="js/libs/gunzip.min.js"></script>
        <script src="js/libs/dat.gui.min.js"></script>

        <script src="js/InitCanvas.js"></script>


    </head>

    <body>
        <div id="info">
            <h1>Prototype: three.js without react.js</h1> 
        </div>

        <!-- two canvas -->
        <div class="row">
            <div class="column" id="original">
            </div>

            <div class="column" id="segment">

            </div>
          </div> 

        <script src="js/logic.js"></script>

    </body>
</html>

我已经看到它确实有不同的工作方式。到目前为止，我知道画布坐标的原点，在全屏模式下是红色的，当我们打开右侧的 Chrome 开发工具时是绿色的：

另外，raycaster 对 ThreeJS 模型进行交互的区域，是全屏的红色区域和下面打开 Mozilla 开发工具时的绿色区域：

3) 目前画布是从名为 column 的父 div 创建的：

在其中创建的画布是 800x600

我们如何实现光线投射器的拦截区域变成画布模型的尺寸？

5）为了能够为自己解决困难，我研究了这个很好的 SO 帖子： THREE.js Ray Intersect fails by adding div

但是我看到，在我链接的帖子中，@WestLangley 使用了 clientX, Y，而在答案部分 @TheJim01 建议使用 offsetX, Y。

由于我是 ThreeJS 的初学者，而且我学习 JS 有一段时间了，我遇到了一些困难：

浏览器中坐标原点是如何处理的？

three.js中坐标的原点是什么？

两者有什么关系？

为什么大部分文章都使用这个表达方式？：

mouse.x = ( event.offsetX / window.innerWidth ) * 2 - 1;

为什么我们需要除以window.innerWidth？通过我们* 2 - 1?

6) 我问所有这些是因为我想做一个 Web 应用程序，我们可以收集用户单击左侧画布的点，然后我们更改右侧画布上相同部分的颜色，并且我们将一些关于它的信息显示为名称和描述。

因此，使用 ThreeJS 收集鼠标点击位置非常重要，以便能够使用它来更改右侧画布和点击部分的颜色。

7) 另外我还阅读了：

Update Three.js Raycaster After CSS Tranformation

EDIT2：22/03/18

我在这里遵循@WestLangley 提供的答案：THREE.js Ray Intersect fails by adding div

它允许我们在画布的图像上拥有光线投射器的交叉区域。

所以它在实践中解决了这个问题。

但是我还是不明白，比如浏览器坐标和 Threejs 坐标之间的关系。

这里我们看到浏览器和ThreeJS的raycaster截取的物体，x坐标是一样的，但是y坐标不一样，为什么？

我也怀疑浏览器在画布上的坐标原点在中心：

这是正确的吗？

我将展示我需要添加的代码片段，以使光线投射器的检测区域与画布的图像相同。

首先我在 CSS 中添加：

canvas {
    width: 200px;
    height: 200px;
    margin: 100px;
    padding: 0px;
    position: static; /* fixed or static */
    top: 100px;
    left: 100px;
}

然后我在logic.js中添加了

function onDocumentMouseDown(event) {
    mousePressed = true;

    clickCount++;

    mouse.x = ( ( event.clientX - OriginalImg.renderer.domElement.offsetLeft ) / OriginalImg.renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( ( event.clientY - OriginalImg.renderer.domElement.offsetTop ) / OriginalImg.renderer.domElement.clientHeight ) * 2 + 1

    console.log('Mouse x position is: ', mouse.x, 'the click number was: ', clickCount);
    console.log('Mouse Y position is: ', mouse.y);

    raycaster.setFromCamera(mouse.clone(), OriginalImg.camera);
    var objects = raycaster.intersectObjects(OriginalImg.scene.children);

    console.log(objects);
}

正如您在上面看到的，我在鼠标 x 和 y 上添加了 Left 和 Top 的偏移量，除以渲染器的宽度/高度。

另外我也研究过OpenAnatomy中的鼠标点击是如何完成的：

function onSceneMouseMove(event) {

        //check if we are not doing a drag (trackball controls)
        if (event.buttons === 0) {
            //compute offset due to container position
            mouse.x = ( (event.clientX-containerOffset.left) / container.clientWidth ) * 2 - 1;
            mouse.y = - ( (event.clientY-containerOffset.top) / container.clientHeight ) * 2 + 1;

            needPickupUpdate = true;
        }
        else {
            needPickupUpdate = false;
        }
}

链接：https://github.com/mhalle/oabrowser/blob/gh-pages/src/app.js

所以我们看到他们也使用了偏移量，left 和 top，并除以宽度和高度，但这次来自容器而不是渲染器。

我也在AMI中研究过他们是如何做到的：

function onDoubleClick(event) {
      const canvas = event.target.parentElement;
      const id = event.target.id;
      const mouse = {
        x: ((event.clientX - canvas.offsetLeft) / canvas.clientWidth) * 2 - 1,
        y: - ((event.clientY - canvas.offsetTop) / canvas.clientHeight) * 2 + 1,
};

链接：https://github.com/FNNDSC/ami/blob/dev/examples/viewers_quadview/viewers_quadview.js

所以在这里我们看到他们使用画布本身的偏移量而不是容器甚至渲染器。

此外，我研究了一些官方的 ThreeJS 示例，它们看起来只有一个全屏渲染器/场景，因此它们没有展示如何在同一个网页中处理各种画布和光线投射器。

    function onDocumentMouseMove( event ) {
        event.preventDefault();
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    }

链接：https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes.html

function onMouseMove( event ) {
                mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
                mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
                raycaster.setFromCamera( mouse, camera );
                // See if the ray from the camera into the world hits one of our meshes
                var intersects = raycaster.intersectObject( mesh );
                // Toggle rotation bool for meshes that we clicked
                if ( intersects.length > 0 ) {
                    helper.position.set( 0, 0, 0 );
                    helper.lookAt( intersects[ 0 ].face.normal );
                    helper.position.copy( intersects[ 0 ].point );
                }
            }

链接：https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_terrain_raycast.html

你能帮帮我吗？

谢谢。

【问题讨论】：

看看.getBoundingClientRect()方法。
查看我的回答here。另一个类似的答案here，虽然对您的问题不太具体。
感谢@TheJim01 的回答以及您对我在同一问题上提出的另一个主题的友好评论。我仍然不明白 renderer.offsetLeft/Top 是如何工作的，以及为什么它被 renderer.innerWidth/Height 划分，你能说明它以便能够理解吗？谢谢。

标签： javascript three.js click raycasting

【解决方案1】：

Raycarster.setFromCamera(NDC, camera) 将标准化设备坐标作为第一个参数。这是一个介于 -1 和 1 之间的值。但您给出的是实际坐标。这就是它不相交的原因。试试这个：

const screenPosition = {
        x: event.clientX - canvas.offsetLeft,
        y: event.clientY - canvas.offsetHeight
};
const widthHalf = canvas.clientWidth * 0.5;
const heightHalf = canvas.clientHeight * 0.5;
const mouse = {
        x: (screenPosition.x - widthHalf) / widthHalf ,
        y: - (screenPosition.y - heightHalf) / heightHalf,
};

还尝试在intersectObject() 中将递归设置为true。

【讨论】：