[React / Typescript / Three.js] 움직이는 기본 상자 만들기

리액트 + 타입스크립트 환경에서 three.js를 이용하여 움직이는 육면체를 만들어보았다.

 

https://threejs.org/editor/

three.js editor

 

위 공식 사이트의 에디터 환경에서 간단한 마우스 클릭을 통해 오브젝트를 직접 만들어보며 구현할 수 있다.

 

 

 

 

import { Box as ChackraBox } from '@chakra-ui/react'
import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'
import { Mesh } from 'three'

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

    useFrame(() => {
      ref.current.rotation.x += 0.01
    })

    return (
      <mesh ref={ref} scale={2} {...props}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    )
  }

  return (
    <ChackraBox bg="black">
      {/* dpr은 디바이스 크기에 따라 반응형으로 보이도록 함 */}
      <Canvas dpr={[1, 2]}>
        {/* 빛이 없으면 아래에 박스 컬러가 그냥 검정으로 보임 */}
        <ambientLight intensity={0.5} />
        <spotLight position={[10, 10, 10]} angle={0.5} penumbra={1} />
        <pointLight position={[-10, -10, -10]} />
        <Box position={[-3.2, 0, 0]} />
        <Box position={[4.2, 0, 0]} />
      </Canvas>
    </ChackraBox>
  )
}

export default Cube

 

 

 

 

.