React Three JS not rendering

Question

我一直在尝试遵循这个教程:https://www.youtube.com/watch?v=wRmeFtRkF-8

但是当我运行我的代码时，我只得到一个空白(CSS中设置的黑色背景色)画布。我知道画布是可操作的，因为当我在黑色部分上滚动时，我不会上下滚动页面。我在视频/github中使用了相同的代码，只是将react-three-fiber替换为@react-three/fiber。

下面是我的代码:

import './Ripple.css';
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import { Canvas, extend, useFrame, useLoader, useThree } from '@react-three/fiber';
import circleImg from './assets/circle.png';
import { Suspense, useCallback, useMemo, useRef } from 'react';
extend({OrbitControls})
function CameraControls(){
const {
camera,
gl: {domElement}
} = useThree();
const controlsRef = useRef();
useFrame(() => controlsRef.current.update())
return (
<orbitControls
ref={controlsRef}
args={[camera, domElement]}
autoRotate
autoRotateSpeed={-0.2}
/>
);
}
function Points() {
const imgTex = useLoader(THREE.TextureLoader, circleImg);
const bufferRef = useRef();
let t = 0;
let f = 0.002;
let a = 3;
const graph = useCallback((x, z) => {
return Math.sin(f * (x ** 2 + z ** 2 + t)) * a;
}, [t, f, a])
const count = 100
const sep = 3
let positions = useMemo(() => {
let positions = []
for (let xi = 0; xi < count; xi++) {
for (let zi = 0; zi < count; zi++) {
let x = sep * (xi - count / 2);
let z = sep * (zi - count / 2);
let y = graph(x, z);
positions.push(x, y, z);
}
}
return new Float32Array(positions);
}, [count, sep, graph])
useFrame(() => {
t += 15

const positions = bufferRef.current.array;
let i = 0;
for (let xi = 0; xi < count; xi++) {
for (let zi = 0; zi < count; zi++) {
let x = sep * (xi - count / 2);
let z = sep * (zi - count / 2);
positions[i + 1] = graph(x, z);
i += 3;
}
}
bufferRef.current.needsUpdate = true;
})
return (
<points>
<bufferGeometry attach="geometry">
<bufferAttribute
ref={bufferRef}
attachObject={['attributes', 'position']}
array={positions}
count={positions.length / 3}
itemSize={3}
/>
</bufferGeometry>
<pointsMaterial
attach="material"
map={imgTex}
color={0x00AAFF}
size={0.5}
sizeAttenuation
transparent={false}
alphaTest={0.5}
opacity={1.0}
/>
</points>
);
}
function AnimationCanvas() {
return (
<Canvas
colorManagement={false}
camera={{ position: [100, 10, 0], fov: 75 }}
>
<Suspense fallback={null}>
<Points />
</Suspense>
<CameraControls/>
</Canvas>
);
}

function Ripple() {
return (
<div className="anim">
<Suspense fallback={<div>Loading...</div>}>
<AnimationCanvas />
</Suspense>
</div>
);
}
export default Ripple;

谢谢你的帮助!

Answer 1

我通过使用PresentationControls和Stage而不是OrbitalControls解决了这个错误，下面是一个工作片段

<Canvas
camera={{ position: [2, 0, 12.25], fov: 15 }}
style={{
backgroundColor: '#111a21',
width: '100vw',
height: '100vh',
}}
>
<PresentationControls >
<ambientLight intensity={1.25} />
<ambientLight intensity={0.1} />
<directionalLight intensity={0.4} />
<Suspense fallback={null}>
<Stage>
<Model />
</Stage>
</Suspense>
</PresentationControls>
</Canvas>