#

luxiaotao1123

2024-04-19 6f338f73c8b2111420fd28dde9afadd925fdce0b

#

 src/components/help.jsx

New file
@@ -0,0 +1,18 @@
import { GizmoHelper, GizmoViewport, Stats } from '@react-three/drei';
import { Suspense } from 'react';

const Gizmo = () => {
    return (
        <Suspense>
            <GizmoHelper alignment="bottom-right" margin={[80, 80]} onUpdate={() => null}>
                {/* <mesh>
        <boxBufferGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="hotpink" />
      </mesh> */}
                <GizmoViewport labelColor="white" axisHeadScale={1} />
                <Stats className="!right-0 top-0 !left-[inherit]" />
            </GizmoHelper>
        </Suspense>
    );
};
export default Gizmo;

 src/pages/base.jsx

@@ -2,29 +2,7 @@
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Environment } from '@react-three/drei'

const Box = (props) => {

    const ref = useRef()

    const [hovered, hover] = useState(false)
    const [clicked, click] = useState(false)

    useFrame((state, delta) => (ref.current.rotation.x += delta))

    return (
        <mesh
            {...props}
            ref={ref}
            scale={clicked ? 1.5 : 1}
            onClick={(event) => click(!clicked)}
            onPointerOver={(event) => (event.stopPropagation(), hover(true))}
            onPointerOut={(event) => hover(false)}>
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
        </mesh>
    )
}
import Help from '@/components/help'

const Base = () => {
    return (
@@ -36,10 +14,30 @@
                <Box position={[0, 0, 0]} />
                <OrbitControls />
                <Environment background preset="warehouse" />
                <Help />
            </Canvas>
        </div>

    )
}

const Box = (props) => {
    const ref = useRef()
    const [hovered, hover] = useState(false)
    const [clicked, click] = useState(false)
    useFrame((state, delta) => (ref.current.rotation.x += delta))
    return (
        <mesh
            {...props}
            ref={ref}
            scale={clicked ? 1.5 : 1}
            onClick={(event) => click(!clicked)}
            onPointerOver={(event) => (event.stopPropagation(), hover(true))}
            onPointerOut={(event) => hover(false)}>
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
        </mesh>
    )
}

export default Base;