英文:
Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend
问题
R3F: Div is not part of the THREE namespace! Did you forget to extend?
import React, { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from '../Loader';
const Computers = () => {
const computer = useGLTF("./desktop_pc/scene.gltf");
return (
)
}
const ComputersCanvas=()=>{
return (
<Canvas
frameloop='demand'
shadows
camera={{ position: [20, 3, 5], fov: 25 }}
gl={{ preserveDrawingBuffer: true }}
>
<Suspense fallback={
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<Preload all />
</Canvas>
);
};
export default ComputersCanvas;
I have not use any div inside canvas, and when I do extend({OrbitControls, Preload, useGLTF}) as the documentation says, then also an error comes as "extended is not defined." I am not able to solve the error as I am new to three.js.
英文:
R3F: Div is not part of the THREE namespace! Did you forget to extend?
import React, { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from '../Loader';
const Computers = () => {
const computer = useGLTF("./desktop_pc/scene.gltf");
return (
<mesh>
<hemisphereLight intensity={0.15} groundColor="black" />
<pointLight intensity={1}/>
<primitive
object={computer.scene}
/>
</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 />
</Canvas>
);
};
export default ComputersCanvas;
i have not use any div inside canvas and when i do extend({OrbitControls, Preload, useGLTF}) as the documention says then also error comes as extended is not defined . i am not able to solve the error as i am new to three.js
答案1
得分: 2
你必须将此代码放入 Loader.jsx 组件中：
import React from 'react';
import { Html, useProgress } from '@react-three/drei';
const Loader = () => {
const { progress } = useProgress();
return (
<Html>
<span
className='canvas-load'
>
</span>
<p
style={{
fontSize: 14,
color: '#f1f1f1',
fontWeight: 800,
marginTop: 40
}}
>
{progress.toFixed(2)}%
</p>
</Html>
)
}
export default Loader
英文:
hey you have to put this code in the Loader.jsx component:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import React from 'react';
import { Html, useProgress } from '@react-three/drei';
const Loader = () => {
const {progress} = useProgress();
return (
<Html>
<span
className='canvas-load'
>
</span>
<p
style={{
fontSize: 14,
color: '#f1f1f1',
fontWeight: 800,
marginTop: 40
}}
>
{progress.toFixed(2)}%
</p>
</Html>
)
}
export default Loader
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论