- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 Three.js 的新手,我想找出为什么光线转换找不到旋转网格对象的某些部分。例如,在下图中,检测到鼠标位于绿色圆圈的位置,就像它在盒子上一样,所以 intersectObjects 返回包含该盒子的数组。否则,鼠标在红色圆圈位置的行为就像它不在框上一样,intersectObjects 返回空数组。
import * as THREE from 'three'
import { Mesh, MeshLambertMaterial } from 'three';
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor("#e5e5e5");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var raycaser = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var geometry = new THREE.BoxGeometry(3.5, .5, 3);
var material = new THREE.MeshLambertMaterial({ color: 0xFFCC00 });
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.set(.5, .8, 0);
scene.add(mesh);
var light = new THREE.PointLight(0xFFFFFF, 1, 500);
light.position.set(0, 1, 7);
scene.add(light);
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
document.body.addEventListener("mousemove", (event) => {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = (event.clientY / window.innerHeight) * 2 - 1;
raycaser.setFromCamera(mouse, camera);
var intersects = Array.from(raycaser.intersectObjects(scene.children, true)).map(inter => inter.object as Mesh);
document.body.style.cursor = intersects.length > 0 ? "pointer" : "default";
for (var i = 0; i < scene.children.length - 1; i++) {
var object = scene.children[i] as Mesh;
var material = object.material as MeshLambertMaterial;
material.emissive.set(intersects.includes(object) ? 0x666666 : 0x000000);
}
});
也许这不是因为对象的旋转,但仍然如何实现 Raycaster 的正确行为?
最佳答案
您必须通过使用 getBoundingClientRect()
来稍微不同地计算鼠标
坐标。查看以下实例:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor("#e5e5e5");
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const raycaser = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const geometry = new THREE.BoxGeometry(3.5, .5, 3);
const material = new THREE.MeshLambertMaterial({
color: 0xFFCC00
});
const mesh = new THREE.Mesh(geometry, material);
mesh.rotation.set(.5, .8, 0);
scene.add(mesh);
const light = new THREE.PointLight(0xFFFFFF, 1, 500);
light.position.set(0, 1, 7);
scene.add(light);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
document.body.addEventListener("pointermove", (event) => {
const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / (rect.right - rect.left)) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / (rect.bottom - rect.top)) * 2 + 1;
raycaser.setFromCamera(mouse, camera);
const intersects = raycaser.intersectObject(scene, true);
document.body.style.cursor = intersects.length > 0 ? "pointer" : "default";
});
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.js"></script>
关于typescript - Raycaster 不检测旋转的物体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68364000/
我在理解如何保持对先前被光线转换击中的对象的引用时遇到问题。 例如,我可以将光线转换脚本放在我的第一人称 Controller 的相机上,从相机位置到前向向量*一些值 此脚本附在相机上 public
Collider.Raycast -> 转换忽略除此之外的所有碰撞器的射线。 Collider2D.Raycast -> 从碰撞器位置开始将光线转换到场景中,忽略碰撞器本身。 我想像 Collider
我在 Unity 中用 LineRenderer 表示 RayCast,所以它看起来像一个激光。我希望这台激光移动它碰撞的物体,以便物体跟随 hit.point的 Raycast 命中。 我的代码不起
我是 Three.js 的新手,我想找出为什么光线转换找不到旋转网格对象的某些部分。例如,在下图中,检测到鼠标位于绿色圆圈的位置,就像它在盒子上一样,所以 intersectObjects 返回包含该
我需要将一些带有附加碰撞器的变换移动到特定位置,然后检查其中一个是否被光线转换击中。 我已经做到了天真的方式(伪代码): foreach(object in objects){ actual_p
我有两个任意点 V1 和 V2。我定义了一条从 V1 到 V2 的射线,我想找到射线撞击平面的确切位置。当我运行我的代码时,命中位置落在了错误的位置!如您所见,绿色球体显示的是光线碰撞位置,它未与 V
我使用了 simple-raycaster 中的代码(安装它对我不起作用)在我的 VR 屏幕上显示指针,它可以工作,但有一些问题 - 在我的“后面”有一个方形空间,该指针消失并且不起作用。知道如何解决
我正在尝试检测与地形的碰撞,这是通过修改飞机的垂直高度创建的。 但 Raycaster 仅在大约 10% 的所有尝试中正确检测到碰撞。您可以看到其中一个交叉点,在以下示例中未正确检测到: http:/
我试图用 C 语言制作一个在终端中运行的 ascii raycaster。我认为以前没有做过这样的事情。它似乎没有正确打印帧。希望有人能告诉我问题出在哪里。这是我的代码:https://ghostbi
这是 3D 的。当我点击 Player 对象时,我的 Raycast 没有击中它。光线转换调试线满屏乱飞,而且只画了一次。重新点击不会重绘。我有意补偿并点击空白区域以点击并让光线穿过我的 Player
我正在用 JavaScript 编写光线转换器。我在查找或实现光线转换算法时遇到问题。目前我正在尝试以下风格的造型。 有一个 block 宽度和高度相等的网格。我的玩家在网格内有一个位置,一个方向是他
我想发送光线转换但不让它与我的播放器发生碰撞。 我该怎么做? using UnityEngine; using System.Collections; public class ExampleClas
我正在使用 SDL 的 C API 编写一个 raycaster。我花了数周时间试图修复臭名昭著的鱼眼效果,但无济于事。根据this源,我可以将我计算出的距离乘以一半 FOV 的余弦来修复它。那对我不
我通过创建具有顶点的几何体,然后构建面来构建自定义网格(八角棱镜)。我现在正在尝试添加鼠标悬停交互,但是 Raycaster 没有从此网格返回任何交点。 我认为这是网格的问题,因为其他几何图形在场景中
我正在尝试使用光线转换来检测交叉点。我目前的问题是我不确定我的光线转换是否瞄准了所需的方向。所以我的一般问题是:有没有办法让光线转换可见?如果是这样:它是如何完成的?这对我有很大帮助。 迈克尔 最佳答
你如何将一个正方形和一个矩形组合成一个 Raycaster 的对象能检测成功吗? 我通过制作一个“树干”(只是一个长矩形)来创建一个自定义的“树”对象,然后在该树干顶部粘贴一个方形对象。 然后我将那棵
我感觉这种方法是完全错误的,因为我无法让我的网站获得适当的性能。 这是我希望您看到的主要代码: onDocumentMouseMove( event ) { if ( this.isUserI
我想在光线转换器与图中这个对象相交的地方添加一个点。我知道您可以修改 raycaster 的线条元素,但我找不到添加圆圈或更改线条一端的方法。 daydream raycaster 最佳答案 Rayc
目前我正在尝试使用 OpenCL 和 Java (LWJGL) 编写一个光线转换引擎。 但是在运行内核时,我无法 printf 或写入调试变量。我感觉内核突然被切断,而且因为报告的时间(opencl
我有一个 Canvas ,里面有几个立方体。我使用 Raycaster 选择它们并更改它们的颜色。但是 Canvas 位于可拖动对象内部,当我四处移动时,我无法更改颜色,颜色更改会在原始位置进行。我想
我是一名优秀的程序员,十分优秀!