React Three react-three/fiber

React Three react-three/fiber

import { Canvas } from "@react-three/fiber";
import { RoundedBox } from '@react-three/drei';
import * as THREE from 'three';
const Rethree: React.FC<any> = () => {
    return (
        <Canvas
            style={{
                width: "100vw",
                height: "100vh",
                position: "fixed",
                left: 0,
                top: 0,
            }}
            shadows
            camera={{ position: [0, 10, 10], fov: 50 }}
        >
            {/* 这里，维度炸弹开始爆炸 */}
            {/* <mesh position={[0, 0, 0]} rotation={new THREE.Euler(0, Math.PI / 4, 0)}>
                <boxGeometry args={[1, 1, 1]} />
                <meshToonMaterial color='red' />
            </mesh> */}
            {/* <RoundedBox
                position={[0, 0, 0]}
                rotation={new THREE.Euler(0, Math.PI / 4, 0)}
                radius={0.2}
            >
                <meshToonMaterial color='red' />
            </RoundedBox> */}

            {(() => {
                const result: JSX.Element[] = [];
                for (let i = 0; i < 100; i++) {
                    const x = Math.random() * 10 - 5;
                    const y = Math.random() * 10 - 5;
                    const z = Math.random() * 10 - 5;
                    const color = `hsl(${Math.random() * 360},60%,50%)`;
                    result.push(
                        <RoundedBox
                            position={[x, y, z]}
                            rotation={new THREE.Euler(0, Math.PI / 4, 0)}
                            radius={0.2}
                            key={i}
                        >
                            <meshToonMaterial color={color} />
                        </RoundedBox>
                    );
                }
                return result;
            })()}

            // 放在 Canvas 下，与 box mesh 平级
            <ambientLight intensity={Math.PI / 2} />
            <spotLight
                position={new THREE.Vector3(10, 8, 10)}
                angle={Math.PI / 4}
                penumbra={1}
                decay={0}
                intensity={Math.PI * 2}
                castShadow
            />
            <pointLight
                position={new THREE.Vector3(-10, -10, -10)}
                decay={0}
                intensity={Math.PI}
            />
        </Canvas>
    )
}
export default Rethree;