您好,我有一个疑问:
我已经实现了光线投射器,并且已经进行了手动测试,但是我不知道为什么在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开发工具时是绿色的坐标:
此外,当我们打开下面的Mozilla开发工具时,raycaster与ThreeJS模型相交的区域是全屏红色区域,绿色是绿色区域。
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
编辑2: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偏移量,除以渲染器的Width / Height。
另外,我还研究了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
因此,我们看到它们也使用偏移量,即左和上,并除以宽度和高度,但这一次来自容器而不是渲染器。
我也研究了他们如何在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
因此,在这里我们看到,它们使用容器本身的偏移量而不是容器甚至渲染器。
另外,我研究了一些ThreeThree官方示例,它们看起来好像只有一个全屏渲染器/场景,因此它们没有显示如何在同一网页上处理各种画布和光线投射器。
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
请问你能帮帮我吗?
谢谢。
最佳答案
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,
};
还尝试在
true
中将递归设置为intersectObject()
。
关于javascript - Threejs,了解Raycaster相交的对象坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49393444/