相关疑难解决方法(0)

我一直在尝试使用Projector和Ray类来进行一些碰撞检测演示.我已经开始尝试使用鼠标选择对象或拖动它们.我已经查看了使用这些对象的示例,但是它们似乎没有任何评论可以解释投影仪和Ray正在做什么的一些方法.我有几个问题,我希望有人能回答这些问题.

究竟发生了什么,Projector.projectVector()和Projector.unprojectVector()有什么区别？我注意到,在使用投影仪和光线对象的所有示例中,似乎在创建光线之前调用了unproject方法.你什么时候使用projectVector？

我在此演示中使用以下代码在使用鼠标拖动时旋转立方体.当我用mouse3D和相机取消投影然后创建Ray时,有人能用简单的术语解释究竟发生了什么.光线是否依赖于对unprojectVector()的调用

/** Event fired when the mouse button is pressed down */
function onDocumentMouseDown(event) {
    event.preventDefault();
    mouseDown = true;
    mouse3D.x = mouse2D.x = mouseDown2D.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse3D.y = mouse2D.y = mouseDown2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse3D.z = 0.5;

    /** Project from camera through the mouse and create a ray */
    projector.unprojectVector(mouse3D, camera);
    var ray = new THREE.Ray(camera.position, mouse3D.subSelf(camera.position).normalize());
    var intersects = ray.intersectObject(crateMesh); // …

当页面上只有一个目标div(包含renderer.domElement)时,我的Three.js脚本运行正常.只要我在目标div上方添加另一个固定高度和宽度的div,ray.intersectObjects就会返回null.我怀疑我为光线创建的矢量是否会导致问题.这是代码.

var vector = new THREE.Vector3( ( event.clientX / divWidth ) * 2 - 1, -( event.clientY / divHeight ) * 2 + 1, 0.5 );

projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

var intersects = ray.intersectObjects( myObjects, true );

关于如何解决这个问题的任何想法.

编辑:现在是THREE.Raycaster (three.js r.56)

我是THREE.js的新手.

我试图在Canvas中鼠标点击对象(不是简单的对象:Box,Sphere,..)来获得点的3D坐标.

详细地说,我正在使用3D对象查看器 - 我有摄像头(THREE.PerspectiveCamera),鼠标控件(旋转,缩放,移动),添加/删除对象(我自己的对象,使用加载器为THREE.js加载)在场景中,..我想添加一个函数,它可以获得3D中点击点的3D坐标.

确切地说,我想要一条光线终点的坐标 - 从鼠标点击camera_near_window开始到结束对象的点,我点击了..

我尝试了很多方法:

• 在z = 0平面上获得点的坐标 - 它工作正常,但它在z = 0平面上并且它不是我需要的,因为我有OrbitControls ..

• THREE.js示例 - 可点击的对象 - 它使用CanvasRenderer(不是WebGLRenderer)并且适用于一些小对象(但适用于我的项目):当我加载许多对象时,浏览器崩溃(CanvasRenderer需要比WebGLRenderer多5倍的内存).

• "如何从鼠标点击坐标获取WebGL 3d空间中的对象" - 我也尝试了这个,但raycaster.intersectObjects没有发现,intersects是一个空数组(也许它只适用于像box,sphere,......这样的简单对象).

任何人都可以给我看一下3D点击对象点击点的3D演示代码,请...？

在过去的三个星期里，我一直在努力试图解决这个问题。如果有人能帮助我，我将非常感激。

我正在开发一款类似于《几何战争》的游戏，其中屏幕中间有一个三角形，您可以在其中移动。

问题是我需要三角形旋转并面向鼠标光标的方向。我不需要担心 z 轴，因为我总是将相机置于固定位置 (z=500)，并且我将场景视为“2D 场景”——所有动作都发生在 z 轴上=0 平面。

计算三角形和鼠标之间的角度是基本的：

targetAngle = Math.atan2(mouseCoord.y-this.position.y, mouseCoord.x-this.position.x)

这是网格。

问题在于 mouseCoords 采用标准 Dom 窗口格式，而三角形的位置采用 Three.js 格式。

问）如何转换鼠标坐标以表示三角形所在 z=0 平面上的坐标？

我尝试了很多方法，包括射线相交，但没有任何效果；（

感谢大家的帮助，非常感谢你们提供了一个令人惊叹的框架！！！！

我正在创建一个球体,Three.js每当它移动时必须跟随鼠标,如本例所示.处理鼠标移动的功能如下:

function onMouseMove(event) {

    // Update the mouse variable
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

    // Make the sphere follow the mouse
    mouseMesh.position.set(event.clientX, event.clientY, 0);
};

我附上一个JSFiddle,其中包含完整的代码,根据DOM,你可以看到它mouseMesh是未定义的.你知道我做错了什么吗？

提前感谢您的回复!

我希望能够使用 React-三纤维和正交相机在画布中将对象拖动到平面上（想象一下棋盘上的棋子）。

这是使用固定相机位置的示例（不是我的）：https://codepen.io/kao​​lay/pen/bqKjVz

但我也希望能够移动相机 - 所以我添加了轨道控件，当拖动对象时该控件将被禁用。

我这里有一个代码沙箱，我的尝试基于许多其他示例： https://codesandbox.io/s/inspiring-franklin-2r3ri ?file=/src/Obj.jsx

主要代码位于两个文件中，App.jsx 以及画布、相机和轨道控件。Obj.jsx 包含被拖动的网格以及使用手势 useDrag 函数内部的拖动逻辑。

应用程序.jsx

import React, { useState } from "react";
import { Canvas } from "@react-three/fiber";
import Obj from "./Obj.jsx";
import { OrthographicCamera, OrbitControls } from "@react-three/drei";
import * as THREE from "three";

export default function App() {
  const [isDragging, setIsDragging] = useState(false);

  return (
    <Canvas style={{ background: "white" }} shadows dpr={[1, 2]}>
      <ambientLight intensity={0.5} />
      <directionalLight
        intensity={0.5}
        castShadow
        shadow-mapSize-height={512}
        shadow-mapSize-width={512}
      />

      <mesh rotation={[-Math.PI / 2, 0, …

我是Three.js的新手，我正在尝试实现Microsoft Paint中用于绘制线段的技术。我试图获取点onMouseDown的坐标，然后使用onMouseMove扩展一条线，直到onMouseDown。请帮忙！