ReactのlibraryなのでReactを最新にupgradeしていないと、エラーがでてしまう。

typesriptも用いているなら

upgradeしないとdependencyでだめって言われる。

'use client';

import React, { useRef, useState } from 'react'

import { Canvas, useFrame } from '@react-three/fiber'

//import './styles.css'

function Box(props) {

	// This reference will give us direct access to the mesh

	const meshRef = useRef()

	// Set up state for the hovered and active state

	const [hovered, setHover] = useState(false)

	const [active, setActive] = useState(false)

	// Subscribe this component to the render-loop, rotate the mesh every frame

	useFrame((state, delta) => (

		meshRef.current.rotation.x += delta

	))

	// Return view, these are regular three.js elements expressed in JSX

	return (

		<mesh

			{...props}

			ref={meshRef}

			scale={active ? 2.5 : 1}

			onClick={(event) => setActive(!active)}

			onPointerOver={(event) => setHover(true)}

			onPointerOut={(event) => setHover(false)}>

			<boxGeometry args={[1, 1, 1]} />

			<meshStandardMaterial 

				color={hovered ? 'red' : 'blue'} />

		</mesh>

	)

}

export function Entrance3D(){

	return (

		<Canvas>

			<ambientLight intensity={Math.PI / 2} />

			<spotLight position={[10, 10, 10]} angle={0.15} 

				penumbra={2} decay={0} intensity={Math.PI} />

			<pointLight position={[-10, -10, -10]} 

				decay={0} intensity={Math.PI} />

			<Box position={[-1.5, 0, 0]} />

			<Box position={[1.5, 0, 0]} />

		</Canvas>

	)

}

<code>