当我们记录交叉点对象时，三个jS，raycaster得到奇怪的坐标

时间：2018-03-21 14:43:24

标签： javascript html 3d three.js raycasting

首先，我将揭露问题，然后我将展示我所做的测试，我点击的点，两组结果以及我得到的结论：

为什么我们的raycaster会报告它没有与加载的3D模型相交？

在这里，我们看到点击的点：

enter image description here

然后我们有第一个结果集：

第一对坐标，记录为'Mouse x position is：'的坐标是：

 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        console.log('Mouse x position is: ', mouse.x, 'the click number was: ', clickCount);
        console.log('Mouse Y position is: ', mouse.y);
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

进入points数组的坐标是我们从ThreeJS的交叉点得到的坐标，代码是：

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

第一个结果集是：

Mouse x position is:  -0.6544117647058824 the click number was:  1
logic.js:46 Mouse Y position is:  0
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6544117647058824 the click number was:  2
logic.js:46 Mouse Y position is:  0.23428571428571432
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6602941176470588 the click number was:  3
logic.js:46 Mouse Y position is:  0.1171428571428571
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.663235294117647 the click number was:  4
logic.js:46 Mouse Y position is:  0.02285714285714291
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.663235294117647 the click number was:  5
logic.js:46 Mouse Y position is:  -0.08571428571428563
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.5852941176470587 the click number was:  6
logic.js:46 Mouse Y position is:  -0.1399999999999999
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.5897058823529412 the click number was:  7
logic.js:46 Mouse Y position is:  -0.08000000000000007
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6014705882352941 the click number was:  8
logic.js:46 Mouse Y position is:  0.008571428571428563
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.5970588235294118 the click number was:  9
logic.js:46 Mouse Y position is:  0.11142857142857143
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.5970588235294118 the click number was:  10
logic.js:46 Mouse Y position is:  0.22571428571428576
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.42794117647058827 the click number was:  11
logic.js:46 Mouse Y position is:  0.29714285714285715
logic.js:50 Array(0)length: 0__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.42500000000000004 the click number was:  12
logic.js:46 Mouse Y position is:  0.4342857142857143
logic.js:50 Array(1)0: distance: 319.20262048609186face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -98.14954576231017y: 47.50767929335348z: -5.684341886080802e-14__proto__: Objectuv: Vector2 {x: 0.12939700516693053, y: 0.8188148192087416}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.4294117647058824 the click number was:  13
logic.js:46 Mouse Y position is:  0.27428571428571424
logic.js:50 Array(1)0: distance: 318.25519853669954face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -99.16839917852792y: 38.10511776654394z: 0__proto__: Objectuv: Vector2 {x: 0.12554991525516854, y: 0.7557160529070115}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.4294117647058824 the click number was:  14
logic.js:46 Mouse Y position is:  0.21999999999999997
logic.js:50 Array(1)0: distance: 316.78474628249586face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -99.1683991785279y: 22.764096328065218z: 0__proto__: Objectuv: Vector2 {x: 0.1255499152551686, y: 0.6527654342041888}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.42500000000000004 the click number was:  15
logic.js:46 Mouse Y position is:  0.13142857142857145
logic.js:50 Array(1)0: distance: 315.7595744289506face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -98.14954576231017y: -8.412818208198z: 0__proto__: Objectuv: Vector2 {x: 0.12939700516693053, y: 0.44354320909845213}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.2955882352941176 the click number was:  16
logic.js:46 Mouse Y position is:  -0.04857142857142849
logic.js:50 Array(1)0: distance: 307.78342564522face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -68.2631788865894y: -8.412818208197999z: 0__proto__: Objectuv: Vector2 {x: 0.24224497591194824, y: 0.44354320909845213}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.30294117647058827 the click number was:  17
logic.js:46 Mouse Y position is:  -0.04857142857142849
logic.js:50 Array(1)0: distance: 308.4313958514228face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -69.96126791361903y: 15.341021438478725z: -5.684341886080802e-14__proto__: Objectuv: Vector2 {x: 0.23583315939234487, y: 0.6029506187028228}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.29852941176470593 the click number was:  18
logic.js:46 Mouse Y position is:  0.08857142857142852
logic.js:50 Array(1)0: distance: 309.9324406079867face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -68.94241449740124y: 36.125631129320865z: 5.684341886080802e-14__proto__: Objectuv: Vector2 {x: 0.23968024930410692, y: 0.7424321021066472}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.30000000000000004 the click number was:  19
logic.js:46 Mouse Y position is:  0.20857142857142852
logic.js:50 Array(1)0: distance: 312.0062793716786face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -69.28203230280717y: 50.47690924918808z: 5.684341886080802e-14__proto__: Objectuv: Vector2 {x: 0.23839788600018627, y: 0.8387407454092879}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.30147058823529416 the click number was:  20
logic.js:46 Mouse Y position is:  0.2914285714285715
logic.js:50 Array(1)0: distance: 314.62032622511975face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -69.62165010821309y: 64.33331570974951z: 0__proto__: Objectuv: Vector2 {x: 0.2371155226962656, y: 0.9317284010118375}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.15441176470588236 the click number was:  21
Mouse Y position is:  0.37142857142857144
logic.js:50 Array(1)0: distance: 306.8896527265873face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -35.659869567621335y: 53.94101086432843z: 0__proto__: Objectuv: Vector2 {x: 0.3653518530883311, y: 0.8619876593099254}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.1485294117647059 the click number was:  22
logic.js:46 Mouse Y position is:  0.3114285714285714
logic.js:50 Array(1)0: distance: 304.0495633098342face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -34.30139834599767y: 35.630759470015114z: 5.684341886080802e-14__proto__: Objectuv: Vector2 {x: 0.37048130630401377, y: 0.7391111144065562}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.15441176470588236 the click number was:  23
logic.js:46 Mouse Y position is:  0.20571428571428574
logic.js:50 Array(1)0: distance: 302.5266960249694face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -35.659869567621335y: 15.835893097784494z: 0__proto__: Objectuv: Vector2 {x: 0.3653518530883311, y: 0.6062716064029139}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.15588235294117647 the click number was:  24
logic.js:46 Mouse Y position is:  0.09142857142857141
logic.js:50 Array(1)0: distance: 302.1538394311042face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "DF3ABD32-2439-4B12-B24C-92CE38041993", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3x: -35.99948737302726y: -0.9897433186115429z: 0__proto__: Objectuv: Vector2 {x: 0.3640694897844105, y: 0.49335802459981776}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.14411764705882357 the click number was:  25
logic.js:46 Mouse Y position is:  -0.005714285714285783
logic.js:50

第二个结果集：

Mouse x position is:  -0.6647058823529413 the click number was:  1
logic.js:46 Mouse Y position is:  0
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6691176470588236 the click number was:  2
logic.js:46 Mouse Y position is:  0.21999999999999997
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6691176470588236 the click number was:  3
logic.js:46 Mouse Y position is:  0.10571428571428576
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.663235294117647 the click number was:  4
logic.js:46 Mouse Y position is:  -0.0028571428571428914
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6602941176470588 the click number was:  5
logic.js:46 Mouse Y position is:  -0.07714285714285718
logic.js:50 Array(0)length: 0__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.6220588235294118 the click number was:  6
logic.js:46 Mouse Y position is:  -0.1399999999999999
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6205882352941177 the click number was:  7
logic.js:46 Mouse Y position is:  -0.10857142857142854
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6132352941176471 the click number was:  8
logic.js:46 Mouse Y position is:  -0.04571428571428582
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6161764705882353 the click number was:  9
logic.js:46 Mouse Y position is:  0.042857142857142816
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.6279411764705882 the click number was:  10
logic.js:46 Mouse Y position is:  0.15142857142857147
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.43676470588235294 the click number was:  11
logic.js:46 Mouse Y position is:  0.27714285714285714
logic.js:50 Array(0)
logic.js:45 Mouse x position is:  -0.43823529411764706 the click number was:  12
logic.js:46 Mouse Y position is:  0.4514285714285714
logic.js:50 Array(1)0: {distance: 322.78883976615697, point: Vector3, object: Mesh, uv: Vector2, face: Face3, …}length: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.4220588235294118 the click number was:  13
logic.js:46 Mouse Y position is:  0.3628571428571429
logic.js:50 Array(1)0: {distance: 318.2292398824061, point: Vector3, object: Mesh, uv: Vector2, face: Face3, …}length: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.42352941176470593 the click number was:  14
logic.js:46 Mouse Y position is:  0.24285714285714288
logic.js:50 Array(1)0: {distance: 316.8899995311535, point: Vector3, object: Mesh, uv: Vector2, face: Face3, …}length: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.42500000000000004 the click number was:  15
logic.js:46 Mouse Y position is:  0.1685714285714286
logic.js:50 Array(1)0: distance: 315.7874942055389face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "D0547ADC-9A00-4CED-83FB-B0D34A70D047", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3 {x: -98.14954576231017, y: -9.402561526809544, z: 0}uv: Vector2 {x: 0.12939700516693053, y: 0.43690123369826994}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.30147058823529416 the click number was:  16
logic.js:46 Mouse Y position is:  -0.05428571428571427
logic.js:50 Array(1)0: distance: 313.73990052940985face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "D0547ADC-9A00-4CED-83FB-B0D34A70D047", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3 {x: -69.62165010821309, y: 59.87947077599763, z: 0}uv: Vector2 {x: 0.2371155226962656, y: 0.9018395117110181}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.29264705882352937 the click number was:  17
logic.js:46 Mouse Y position is:  0.34571428571428575
logic.js:50 Array(1)0: distance: 310.1199201904161face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "D0547ADC-9A00-4CED-83FB-B0D34A70D047", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3 {x: -67.58394327577757, y: 40.08460440376702, z: -5.684341886080802e-14}uv: Vector2 {x: 0.24480970251978962, y: 0.7690000037073758}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.3088235294117647 the click number was:  18
logic.js:46 Mouse Y position is:  0.23142857142857143
logic.js:50 Array(1)0: distance: 308.84705792725225face: Face3 {a: 0, b: 2, c: 1, normal: Vector3, vertexNormals: Array(3), …}faceIndex: 0object: Mesh {uuid: "D0547ADC-9A00-4CED-83FB-B0D34A70D047", name: "", type: "Mesh", parent: Scene, children: Array(0), …}point: Vector3 {x: -71.31973913524268, y: 17.32050807570179, z: 0}uv: Vector2 {x: 0.2307037061766623, y: 0.616234569503187}__proto__: Objectlength: 1__proto__: Array(0)
logic.js:45 Mouse x position is:  -0.31470588235294117 the click number was:  19
logic.js:46 Mouse Y position is:  0.09999999999999998

正如我们所见，我们观察到前11个点与3D模型没有交叉。

此外，我已经做了两个图表来显示浅坐标与raycaster / Threejs得到的关系：

点击画布时检测到第16,17和18点：

enter image description here

当raycaster与模型相交时检测到点16,17和18：

enter image description here

数据：

enter image description here

对raycaster未检测到的11点的可能解释：

enter image description here

需要进一步解释的问题：

为什么raycaster在12点和13点交叉？背景是与？相交的有效对象吗？

为什么raycaster不会在第1点到第11点拦截3D模型？

重要代码：

logic.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(); 
}

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



function onDocumentMouseDown( event ) {
    mousePressed = true;

    clickCount++;

    let Originalcontainer = document.getElementById('original');

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    console.log('Mouse x position is: ', mouse.x, 'the click number was: ', clickCount);
    console.log('Mouse Y position is: ', mouse.y);
    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();


}

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>

0 个答案:

没有答案
相关问题
最新问题