我正在关注 Youtube 上的 3d 作品集教程，但遇到了这个错误。在这里，我尝试渲染网格，但控制台显示警告“此元素在此浏览器中无法识别”。浏览器正在渲染其余部分，但这部分代码没有被渲染。这是代码块：

const Computers = () => {
    const computer = useGLTF("./desktop_pc/scene.gltf");
    console.log(computer);
    return (
        <mesh>
            <hemisphereLight intensity={0.15} groundColor="black" />
            <pointLight intensity={1} />
            <primitive
                object={computer.scene}
                scale={0.75}
                position={[0, -3.25, 1.5]}
                rotation={[-0.01, -0.2, -0.1]}
            />
        </mesh>
    );
};

const ComputersCanvas = () => {
    return (
        <Canvas
            frameloop="demand"
            shadows
            camera={{
                position: [20, 3, 5],
                fov: 25,
            }}
            gl={{ preserveDrawingBuffer: true }}>
            <Suspense fallback={<CanvasLoader />}>
                <OrbitControls
                    enableZoom={false}
                    maxPolarAngle={Math.PI / 2}
                    minPolarAngle={Math.PI / 2}
                />
                <Computers />
            </Suspense>
            <Preload all /> …

我正在尝试学习如何使用three jsReact。为此，我正在使用@react-three/fiber和@react-three/drei。

chriscourses 的这个项目是我用来学习三个 js 的项目，我希望用它来学习使用 Threejs 和 React。

下面的代码应该显示从给定坐标中萌芽的方框，但目前它们都向一个方向倾斜。使用lookat应该可以解决问题，但是我不知道如何lookat在@react-three/fiber/中使用@react-three/drei。

import React, { FC, useRef } from 'react';
import { Box as NativeBox } from '@react-three/drei'
import { Vector3 } from 'three';
import { useFrame } from '@react-three/fiber';


type Props = {
  country: any,
}
const lookAtCubePosition = new Vector3(0, 0, 0)
const Box: FC<Props> = (props) => {
  const mesh = useRef()
  
  const { …

我想使用react-三纤维（或使用Drei库）显示电路。

• 电路由segments和组成turns。
• 段是通过两点来定义的。
• 转弯是通过点列表来定义的。

我希望我的用户能够自己构建电路。这意味着他将能够修改（拖/放/删除等...）转弯和线段。它将产生大约 10,000 个段和转弯，因此会产生超过 100,000 个点。

你将如何进行？ （有关我的测试的更多详细信息，请参阅下文）

考虑的解决方案和困难

段

• r3f（（react-三纤维）instanceMesh组件（带有矩形）：我需要存储链接到我的转弯/段id的instanceId的地图，这似乎不是不可能的。这似乎是一个很好的解决方案，并且仍然是具有超过 100k 元素的性能。我在这里实现了一个快速示例来测试此逻辑。

• drei实例组件：当元素超过 1k 时，它开始变得滞后。您可以在这里玩一个示例（改编自 r3f 示例）

转弯

• r3finstanceMesh组件：回合可以看作是段的列表。使用这个解决方案，如果我们放大太多，我们可以清楚地看到每个部分。这可能并不理想，但似乎正在发挥作用。另一个问题是，一个回合可以由 100+ 点组成。如果我有 1k 圈，它将绘制 100k 段，这开始很多

• line：我们只能创建一种将所有转弯都包含在内的几何体。然而，目前我的所有线条都是链接的（就像我用一支笔一次性绘制它们一样）。此外，我认为用这个解决方案不容易操纵特定的转弯。

• Linev2：我们还可以创建与转弯一样多的几何形状。每个回合都将是一个实体，而不是许多段。但是，不建议使用 1K+ 几何形状。使用这个解决方案时，性能一点都不好。

• 限制对象的数量：我想尝试的另一个解决方案是在一个几何体中绘制所有转弯。在这种情况下，我不会有任何互动。当放大到足够大时，最多只能看到 50 个可见区域，我会添加包含所有交互的实线。这有点棘手，但似乎也是一个很好的妥协。

理想的情况是拥有一个转弯实例（例如线段）。然而，每个转弯似乎都是唯一的，我不知道如何在一个实例中仅创建一个几何体来显示所有可能的转弯。

实现这个逻辑的最佳方法是什么？

我尝试了这种方法，仅绘制最接近的转弯。它保持相当流畅。我将尝试进一步研究这个解决方案：这是一个实现的 GIF 示例：

我正在尝试使用加载图像纹理useTexture并将其应用到meshStandardMaterial我的反应本机应用程序中。当我从本地资源文件夹导入图像时，纹理工作正常。但是，当我将图像更改为远程 URL 时，纹理不会被应用，材质会呈现黑色。我添加了下面的代码

import React, { Suspense, useRef } from 'react';
import { View } from 'react-native';
import { Canvas } from '@react-three/fiber/native';
import { useTexture } from '@react-three/drei/native';
import useWindowDimensions from 'react-native/Libraries/Utilities/useWindowDimensions';
import localTexturePath from './assets/duck_texture.png'

function Plane() {
  const ref = useRef();
  // THIS DOESN'T WORK
  const textureUrl = 'https://cdntest.metatube.studio/public/Texture.png'
  // THIS WORKS
  // const textureUrl = localTexturePath
  useTexture(textureUrl, (t) => {
    ref.current.map = t
    ref.current.needsUpdate = true
  })
  return(
    <mesh>
      <planeBufferGeometry attach="geometry" args={[3, …

我在尝试使用仅用于碰撞的导入 glb 文件使碰撞正常工作时遇到问题。

这个问题有两个部分：

1. 我目前在控制台中收到大量faceNormal 错误和顶点警告。

.faceNormals[767] = Vec3(0.999994684003945,-4.252105447140875e-10,0.003260669233505899) looks like it points into the shape? The vertices follow. Make sure they are ordered CCW around the normal, using the right hand rule.

.vertices[555] = Vec3(-18.135730743408203,9.071623802185059,-13.433568000793457)

我不确定这个错误是否与我如何合并对象的几何形状或对象如何在搅拌机内构建有关。

2. 当我的球体与 glb 模型碰撞时，有时会用足够的力将其剪断。（按住W键使球体向前移动）。它特别是在环境的边缘，在平坦的墙壁上，它会产生一些阻力，但仍然能够在按住移动键足够的时间下成功地穿过。

这是我用来导入 glb 模型的代码：

import React, { useMemo } from "react";
import { useConvexPolyhedron } from "@react-three/cannon";
import { Geometry } from "three-stdlib/deprecated/Geometry";
import {useGLTF} from "@react-three/drei";
import collision from "./Collision6.glb";

function toConvexProps(bufferGeometry) {
  const geo = new Geometry().fromBufferGeometry(bufferGeometry);

  geo.mergeVertices();
  return …

现象

当react-bootstrap和react- Three/drei结合使用时，react-bootstrap中出现以下错误

表达式生成的联合类型太复杂而无法表示。ts(2590)

代码位于下面的代码沙箱中。

https://codesandbox.io/s/react-r3f-r3d-bootstrap-t7111f?file=/src/App.tsx

文件名：App.tsx 行：40

import "./styles.css";
import { useRef } from "react";
import { Button } from "react-bootstrap";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

const Box = (props: JSX.IntrinsicElements["mesh"]) => {
  const ref = useRef<THREE.Mesh>(null!);

  useFrame((state) => {
    ref.current.rotation.x += 0.01;
    ref.current.rotation.y += 0.01;
    ref.current.rotation.z += 0.01;
  });
  return (
    <mesh ref={ref} {...props}>
      <boxBufferGeometry />
      <meshPhysicalMaterial color="blue" />
    </mesh>
  );
};
export default function App() {
  return (
    <div …

我正在尝试在 XR 环境中实现这个小提琴。

在小提琴中，第二个场景固定在屏幕上，但不使用 oculus/玩家相机...

有没有人有办法使场景或物体始终位于眼的右上角？我想尺寸和相机有错误，但找不到什么......

我不确定，我脑子坏了，这是我迈向 XR 的第一步......

门户第二场景代码：

function Viewcube() {
  const { gl, scene, camera, size } = useThree()
  const virtualScene = useMemo(() => new Scene(), [])
  const virtualCam = useRef()
  const ref = useRef()
  const [hover, set] = useState(null)
  const matrix = new Matrix4()

  useFrame(() => {
    matrix.copy(camera.matrix).invert()
    ref.current.quaternion.setFromRotationMatrix(matrix)
    gl.autoClear = true
    gl.render(scene, camera)
    gl.autoClear = false
    gl.clearDepth()
    gl.render(virtualScene, virtualCam.current)
  }, 1)

  return createPortal(
    <>
      <OrthographicCamera ref={virtualCam} makeDefault={false} position={[0, 0, 100]} />
      <mesh
        ref={ref}
        raycast={useCamera(virtualCam)} …

我有一个平面网格，我想用初始旋转向量对其进行初始化。但是，设置rotateXprop 不起作用。

<mesh rotateX={1}>
   <planeGeometry args={[5, 5, 64, 64]} />
   <meshStandardMaterial />
</mesh>

我究竟做错了什么？

I'm trying to add a 3D effect on a plane in a React site. But I haven't been able to create a plane that fills the camera, like in all the Three.js shader or post-processing examples.

I have tried using an Orthographic Camera + plane, based on this answer, like so:

<Canvas>
  <OrthographicCamera left={-1} right={1} top={1} bottom={-1} near={0} far={1} />
    <planeGeometry args={[2, 2]} />
  </OrthographicCamera>
</Canvas>

But this results in a small square in the middle of the canvas. …

我目前陷入了有关 ref 对象类型的打字稿错误（据我所知）。我对打字稿很陌生，所以我不明白如何解决这个问题！

我已附加了给我的 Tootip 打字稿，以及它在构建阶段引发的错误。此外，我使用react- Three-drei和react- Three-Fiber库来合成 Three.js 对象

这是抛出的错误：

src/components/models/web/Plane.tsx:120:22 - error TS2322: Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'Ref<OrbitControls> | undefined'.
  Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'RefObject<OrbitControls>'.
    Types of property 'current' are incompatible.
      Type 'OrbitControlsProps | undefined' is not assignable to type 'OrbitControls | null'.
        Type 'undefined' is not assignable to type 'OrbitControls | null'.

120       <OrbitControls ref={cameraRef} />
                         ~~~

  node_modules/@types/react/index.d.ts:134:9
    134         ref?: Ref<T> | undefined;
                ~~~
    The expected type …

如何将退出的 jsx 文件从npx gltfjsx命令正确转换为TypeScript文件？无法纠正错误。

import React, {useRef} from 'react'\nimport { useGLTF } from '@react-three/drei'\n\nexport default function Crown(state: any, { ...props }) {\n    const group = useRef()\n    // @ts-ignore\n    const { nodes, materials } = useGLTF('/crown.glb') //TS2339: Property 'materials' does not exist on type 'GLTF'.\n    return (\n        <group\n            // @ts-ignore\n            ref={group} //TS2322: Type 'MutableRefObject<undefined>' is not assignable to type 'Ref<Group> | undefined'. \xc2\xa0\xc2\xa0Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<Group>'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Types of property 'current' are incompatible. …

我想我正在关注react-3文档和许多其他示例，但无法让drei useGLTF像其他人一样工作。

我有一个简单的、从头开始的 Next|React|react- Three/Fiber 项目。我只是想加载示例宇航员并显示它。

我相信下面的代码实际上可以完美运行一段时间。经过一些小的更改和撤消后，我想我回到了相同的代码，但现在不起作用。（我尝试过有或没有悬念。）

import { Canvas, Suspense } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'

function Model() {
  const gltf = useGLTF('https://thinkuldeep.com/modelviewer/Astronaut.glb')
  return (<primitive object={gltf.scene} />)
}

export default function Home() {
  return (
    <div>
      {/* <Suspense> */}
        <Canvas>
          <ambientLight />
          <Model />
        </Canvas>
      {/* </Suspense> */}
    </div>
  )
}

这是控制台消息：

这是我的 package.json：

{
  "name": "cfgnext",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }, …

我正在开发这个codesandbox来练习React Three Fiber。

我对演示的问题是，我真的不明白如何将初始缩放设置得更宽，以便OrbitControls我可以看到更多小星星？

这是我认为需要传递缩放值的相关代码

  <OrbitControls
    enableZoom={true}
    enablePan={true}
    enableRotate={true}
  />

我在官方网站上进行了挖掘，以了解OrbitControls配置初始缩放实际需要什么