问题标签 [react-three-drei]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
three.js - 如何通过 react-three/fiber 和 react-three/drei 中的代码平移相机
我可以将相机从默认位置平[0,0,0]
移到[100,100,0]
使用鼠标OrbitControls
。但是仍然无法通过代码进行平移。
请有任何想法。
react-three-fiber - 如何获取 OrbitControls 参考
我正在尝试访问 OrbitControls ref,如下所示:
代码: https ://codesandbox.io/s/cool-flower-f5qr0?file=/src/App.tsx:949-962
ref 未定义。请问有什么想法吗?
reactjs - 在 @react-three/fiber 和 @react-three/drei 中使用 Lookat
我正在尝试学习如何使用three js
react。为此,我正在使用@react-three/fiber
and @react-three/drei
。
chriscourses的这个项目是我以前学过的三个js,我希望用它来学习用react的threejs。
下面的代码应该显示从给定坐标中出现的框,但是目前它们都向一个方向倾斜。使用lookat
应该可以解决问题,但是我不知道如何lookat
在@react-three/fiber
/中使用@react-three/drei
。
reactjs - react-three-fiber & drei useTexture hooks错误
错误:未捕获的 R3F 钩子只能在 Canvas 组件中使用!
错误位置:const terrainTexture = useTexutre(url);
错误代码:
此代码“useTexture”工作正常。和上面的代码有什么区别?
svg - 您如何控制 Three.js 中导入的 SVG 的大小?
我正在使用 SVG 导入一个 SVG SVGLoader
,并将每个路径转换为一个网格,然后将其放入一个组中。当我这样做时,该小组比我希望的要大得多。而不是缩放,我想以正确的大小导入它。当我更改 SVG 上的width
和height
属性时:<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25">
渲染网格的大小没有任何变化。我还没有看到任何实际描述 SVG 大小是如何由加载器确定的。它是一个视图框吗?有什么特别的事情需要做吗?
reactjs - 无法在 React 三纤维中旋转网格
我有一个平面网格,我想用一个初始旋转向量对其进行初始化。但是,设置rotateX
道具不起作用。
我究竟做错了什么?
three.js - 在反应三纤维中添加pointLight
我想在反应三纤维中添加点光源,它似乎遵循与通常的 three.js 语法不同的语法。
reactjs - 带有反应三光纤的自定义光标 - 相机问题
我有一个关于用 React 三纤维制作的自定义光标的小问题。跟踪视口上的鼠标移动并使用它更新元素的位置非常容易,但是一旦在方程中添加相机移动,它就会变得更加棘手。
我做了一个小代码笔来展示这个问题,基本上我的自定义光标只有在我的相机就在场景前面时才能工作,例如,如果位置是 [0,0,5],而我的项目不是这种情况。
https://codesandbox.io/s/simple-serotoninene-forked-shwiw?file=/src/ThreeElements/CanvasContainer.js
为了增加更多的复杂性,我还在我的真正专业版上设置了鼠标移动的相机动画,这让光标更加错误。
任何人都有解决我问题的技巧吗?
谢谢 !