- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
您好,我有一个疑问:
我已经实现了光线投射器,并且已经进行了手动测试,但是我不知道为什么在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)
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();
}
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();
}
// 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 );
}
}
<!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>
mouse.x = ( event.offsetX / window.innerWidth ) * 2 - 1;
window.innerWidth
?通过我们做
* 2 - 1
吗?
canvas {
width: 200px;
height: 200px;
margin: 100px;
padding: 0px;
position: static; /* fixed or static */
top: 100px;
left: 100px;
}
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);
}
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;
}
}
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,
};
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
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 );
}
}
最佳答案
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/
我有一个标记的个体列表(Mark 列),这些个体在河流(LocStart 和 LocEnd)范围内的不同年份(Year 列)被捕获。在河上的位置以米为单位。 我想知道一个被标记的个体是否在不同年份之间
我目前正在开发一个事件管理系统,其中数据库存储时隙,如下所示: SlotId | DateTime | Duration -------+-------------------
给定同一个圆的两个圆段:A=[a1, a2] 和 B=[b1, b2],其中: a1、a2、b1、b2 的值介于 -inf 和 +inf 之间 a1 overlap A=[ -45°, 45
试图让两个数据集相交,但我做不到。例如,在我下面的代码中,相交 mySet 和 mySet2 应该产生“1”,因为它们在它们的集合中都有一个值“1”。 var mySet = new Set(); v
给定同一个圆的两个圆段:A=[a1, a2] 和 B=[b1, b2],其中: a1、a2、b1、b2 的值介于 -inf 和 +inf 之间 a1 overlap A=[ -45°, 45
我有两个要相交的集合,并对匹配元素执行求和运算。 例如集合是(在伪代码中): col1 = { {"A", 5}, {"B", 3}, {"C", 2} } col2 = { {"B", 1}, {"
我有一个使用 -setFrameRotation 旋转的 NSView。 (这是必要的,因为 View 响应鼠标事件,如果您仅使用旋转的 NSAffineTransform 绘制 View ,则不会获
我在网上找到了这段代码,显然它对其他人有效,但对我无效?我不知道哪里错了。我做了一个简单的例子,并将我的 Range1 和 Range 2 设为 excel 中的某些单元格, 另外,我想知道是否有办法
确定直线是否与矩形相交的最有效方法是什么? 我正在寻找类似的东西: CGPoint startLine = CGPointMake(5.0f,5.0f); CGPoint endLine = CGPo
QPolygonF有与其他 QPolygonF 并集、相交和相减的方法,但我需要与 QLineF 执行相交测试。 API 中似乎缺少此功能。 我想我可以做这样的事情: if (polygon .con
所以,我尝试使用矩形在游戏中对墙壁进行碰撞,我决定尝试使用 ArrayList 来存储每面墙的矩形,然后我将整个 field 设为一面墙,并且所有我想做的是删除三堵墙,所以我正在执行 shapeLis
鉴于这两个表/集合具有不同的项目组, 我如何找到 set1 中的哪些组跨越 set2 中的多个组? 如何找到 set1 中的组不能被 set2 中的单个组覆盖? 例如对于下表,A (1,2,5) 是唯
我在 Hive 中有两个字符串数组,例如 {'value1','value2','value3'} {'value1', 'value2'} 我想合并没有重复的数组,结果: {'value1','va
谁能给我 tsql 来查找包含起始日期和截止日期的日期。 select * from empc where DateFrom >= p_todate AND DateTo = p_fromdate 关
我正在尝试从分桶列中获取子集,然后获取交集。 这将从原始表中选择其他列。 我也对系列过滤持开放态度。 下面的代码报告 col1 不存在 - 不确定这是正确的方法。 WITH ranges AS (
SELECT friend_id FROM friendships WHERE user_id = 1; Returns: +-----------+ | friend_id | +---------
似乎无法在任何地方找到这个问题的答案。 我的游戏在用户触摸屏幕时开始,手指必须停留在一条路径内,如果它触摸/与边缘相交,那么我希望它运行 [self gameover] 方法。 边缘将是一个 UIIm
我有两个 RDD,一个非常大,另一个小得多。我想用小 RDD 的键在大 RDD 中找到所有唯一的元组。 大 RDD 太大,我必须避免完全洗牌 小型 RDD 也足够大,我无法广播它。我也许可以广播它的
所以我有两个函数的代码。第一个打印一个空的 20x20 板,第二个打印中间的一个字。现在我正在尝试编写一个函数来检查输入的单词是否会与同一字母的另一个单词(如填字游戏)相交。这是前两个函数的代码(此处
我正在一个网站上进行培训,该网站要求我制作一个程序,该程序将询问两个矩形的坐标并检查矩形是否相交。然后,当我发送程序时,网站会对其进行几次测试。它要求 A 矩形的 x 最小值、x 最大值、y 最小值和
我是一名优秀的程序员,十分优秀!