- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望能够使用 React-three-fiber 和正交相机将对象拖过 Canvas 中的平面(想想棋盘上的棋子)。
这是一个使用固定相机位置的示例(不是我的):https://codepen.io/kaolay/pen/bqKjVz
但我也希望能够移动相机 - 所以我添加了 Orbitcontrols,当对象被拖动时这些控件会被禁用。
我这里有一个代码沙箱,我的尝试基于许多其他示例: https://codesandbox.io/s/inspiring-franklin-2r3ri?file=/src/Obj.jsx
主要代码在两个文件中,带有 Canvas 、相机和轨道控件的 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, 0]} receiveShadow>
<planeBufferGeometry attach="geometry" args={[10, 10]} receiveShadow />
<meshPhongMaterial
attach="material"
color="#ccc"
side={THREE.DoubleSide}
receiveShadow
/>
</mesh>
<Obj setIsDragging={setIsDragging} />
<OrthographicCamera makeDefault zoom={50} position={[0, 40, 200]} />
<OrbitControls minZoom={10} maxZoom={50} enabled={!isDragging} />
</Canvas>
);
}
Obj.jsx(在 Use Drag 函数中有违规代码)
import React, { useState } from "react";
import { useDrag } from "@use-gesture/react";
import { animated, useSpring } from "@react-spring/three";
import { useThree } from "@react-three/fiber";
import * as THREE from "three";
function Obj({ setIsDragging }) {
const { camera } = useThree();
const [pos, setPos] = useState([0, 1, 0]);
const { size, viewport } = useThree();
const aspect = size.width / viewport.width;
const [spring, api] = useSpring(() => ({
// position: [0, 0, 0],
position: pos,
scale: 1,
rotation: [0, 0, 0],
config: { friction: 10 }
}));
const bind = useDrag(
({ active, delta, movement: [x, y], velocity, timeStamp, memo = 0 }) => {
if (active) {
//// THIS IS THE CODE THAT I KNOW IS NOT WORKING /////
let vDir = new THREE.Vector3();
let vPos = new THREE.Vector3(
(x / window.innerWidth) * 2 - 1,
-(y / window.innerHeight) * 2 + 1,
0.5
).unproject(camera);
vDir.copy(vPos).sub(camera.position).normalize();
let flDistance = -camera.position.z / vDir.z;
vPos = vPos.copy(camera.position).add(vDir.multiplyScalar(flDistance));
const arbitraryFactor = 1; // I suspect this has to reflect the distance from camera in all dims...
setPos([vPos.x * arbitraryFactor, 1.5, -vPos.y * arbitraryFactor]);
//// END /////
}
setIsDragging(active);
api.start({
// position: active ? [x / aspect, -y / aspect, 0] : [0, 0, 0],
position: pos,
scale: active ? 1.2 : 1,
rotation: [y / aspect, x / aspect, 0]
});
return timeStamp;
}
);
return (
<animated.mesh {...spring} {...bind()} castShadow>
<dodecahedronBufferGeometry
castShadow
attach="geometry"
args={[1.4, 0]}
/>
<meshNormalMaterial attach="material" />
</animated.mesh>
);
}
export default Obj;
一些有用的引用资料,但还没有让我到达那里! Mouse / Canvas X, Y to Three.js World X, Y, Z
https://codesandbox.io/s/react-three-fiber-gestures-forked-lpfv3?file=/src/App.js:1160-1247
https://codesandbox.io/embed/react-three-fiber-gestures-08d22?codemirror=1
https://codesandbox.io/s/r3f-lines-capture-1gkvp
https://github.com/pmndrs/react-three-fiber/discussions/641
最后再次重新链接到我的代码沙箱示例: https://codesandbox.io/s/inspiring-franklin-2r3ri?file=/src/Obj.jsx:0-1848
最佳答案
在意识到 React-Three-Fiber 将事件信息传递给 useDrag 后,我采取了不同的方法,其中包含我需要的坐标和射线信息。
https://codesandbox.io/s/musing-night-wso9v?file=/src/App.jsx
应用程序.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);
const floorPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
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, 0]}
position={[0, -0.1, 0]}
receiveShadow
>
<planeBufferGeometry attach="geometry" args={[10, 10]} receiveShadow />
<meshPhongMaterial
attach="material"
color="#ccc"
side={THREE.DoubleSide}
receiveShadow
/>
</mesh>
<planeHelper args={[floorPlane, 5, "red"]} />
<gridHelper args={[100, 100]} />
<Obj setIsDragging={setIsDragging} floorPlane={floorPlane} />
<OrthographicCamera makeDefault zoom={50} position={[0, 40, 200]} />
<OrbitControls minZoom={10} maxZoom={50} enabled={!isDragging} />
</Canvas>
);
}
对象.jsx
import React, { useState, useRef } from "react";
import { useDrag } from "@use-gesture/react";
import { animated, useSpring } from "@react-spring/three";
import { useThree } from "@react-three/fiber";
import * as THREE from "three";
function Obj({ setIsDragging, floorPlane }) {
const [pos, setPos] = useState([0, 1, 0]);
const { size, viewport } = useThree();
const aspect = size.width / viewport.width;
let planeIntersectPoint = new THREE.Vector3();
const dragObjectRef = useRef();
const [spring, api] = useSpring(() => ({
// position: [0, 0, 0],
position: pos,
scale: 1,
rotation: [0, 0, 0],
config: { friction: 10 }
}));
const bind = useDrag(
({ active, movement: [x, y], timeStamp, event }) => {
if (active) {
event.ray.intersectPlane(floorPlane, planeIntersectPoint);
setPos([planeIntersectPoint.x, 1.5, planeIntersectPoint.z]);
}
setIsDragging(active);
api.start({
// position: active ? [x / aspect, -y / aspect, 0] : [0, 0, 0],
position: pos,
scale: active ? 1.2 : 1,
rotation: [y / aspect, x / aspect, 0]
});
return timeStamp;
},
{ delay: true }
);
return (
<animated.mesh {...spring} {...bind()} castShadow>
<dodecahedronBufferGeometry
ref={dragObjectRef}
attach="geometry"
args={[1.4, 0]}
/>
<meshNormalMaterial attach="material" />
</animated.mesh>
);
}
export default Obj;
这不应该花我那么长时间,我希望这对其他人有帮助!
关于three.js - 如何使用可以通过轨道控制移动的正交相机在 react 三/纤维中拖动 x 和 z 中受 y 约束的对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69414101/
我每天运行命令将新记录插入 BigQuery 表,并想记录每天插入的记录数。 我创建了一个 QueryJob包含 SELECT 查询和 destination 表的对象。我将 write_dispos
当您登录受密码保护的页面时,WordPress 会设置一个类似于 wp-postpass_hash 的 cookie。 这个 cookie 似乎永远存在。我希望能够为用户提供“注销”链接。如果我不知道
我正在用 C++ 设计一个公共(public) API,我相信我想保留 C++ 属性函数样式约定,它们看起来像 int& Value() 和 const int& Value() const 而不是按
我正在构建一个使用 jQuery 图片库的网站。你可以看一个例子 here . 出于某种原因,当画廊更改图像时,或者当您手动更改图像时,页面高度似乎因为需要更好的词而“闪烁”。新图像似乎增加了页面高度
我正在尝试使用 CSS3 实现一个简单的 3D 照片库。它在 IE10+ 浏览器上运行良好,但在最新版本的 chrome 上有一个小错误,即单击时按钮消失。谁能告诉我如何解决这个问题?提前谢谢你。 w
我想知道为什么其中一些程序会抛出段错误,而另一些则不会。 这个程序抛出一个段错误: #include int main(){ int ar[2096263]; printf("asd
今天我移植了我的旧内存基准测试 从 Borland C++ builder 5.0 到 BDS2006 Turbo C++,发现奇怪的事情。 BCB5 的 exe 运行正常且稳定 来自 BDS2006
下面是我的代码,用于解决 PE 问题 7(“找到第 10001 个素数”): #include using namespace std; bool isPrime(int n, int primes
我有两个 float 元素,右边和左边。 它们的父元素都是 text-align: center, margin: auto: 1. text 999 ' style='curso
我正在为我的 UI 元素制作一个简单的动画。 我有一个动画组件,它有 2 个不同的动画 - ZoomIn 和 ZoomOut。 每当需要在屏幕上显示 UI 元素(例如按钮)时,就会显示这些动画。 我通
我正在使用 .net 3.5 和 vb.net。我对下面提到的每种加密的内部工作知之甚少。我只使用 .net 类库中提供的类。 我有一段信息已经用 TripleDes 加密,然后是 Rijndael,
我有一个关于正确设计 php 文件及其在服务器上的存储的一般性问题。 问题是这样的:我将一个 php 对象的函数拆分到不同的 php 文件中,例如: 文件 1 AndroidFlashCard.php
我在地址表单输入上有自动完成功能。当用户点击建议时,州和邮政编码信息会自动填充。cp_state 是带有状态名称下拉列表的选择框,而cp_zipcode 是邮政编码的输入文本。 我使用下面的 java
我试图按顺序选择记录,但随机限制。 SELECT * FROM tm_winners WHERE paid_out=0 ORDER BY DESC LIMIT RAND(4,8) 但是,我似乎无法随机
我有一张这样的表,我想选取 20 位 HitTest 门的歌手并按字母顺序对他们(这 20 位歌手)进行排序。 id name hit --------------
我正在尝试使用受风影响的雨粒子,也就是 physicsWorld 重力。 我可以看到重力确实对我的 SKSpriteNode 有影响,但我无法对 SKEmitterNode 产生相同的影响。 我只是想
我有一个问题,我在网站加载时调用淡入,但由于 css 过渡效果,元素变为完全不透明,立即淡出然后淡入,我试图找到解决这个问题的方法,因为它看起来很糟糕 jQuery $(window).on("loa
我定义了一个容器元素,包含一个float div和一个ul,并且 ul 元素包含一些 float li 元素。我想清除 ul 的 float ,但 ul 的高度受其 float 兄弟元素的影响。这是
我想使用一项服务。我 100% 确信该服务可以正常工作。 服务电话 public void add(User user) { ConnectionRequest con = new Connectio
如果您在桌面/PC 上访问某人的 instagram 页面,单击搜索栏时,它会向左浮动,然后可以输入文本进行搜索。当搜索字段中没有文本时,搜索图标和“搜索”占位符会回到原来的中心位置。 我假设 jav
我是一名优秀的程序员,十分优秀!