1.3 Creating a scene

All 3D components to be created should be child elements of the <ThreeCanvas/> element. As you can see in the following example code,

• There are <perspectiveCamera/> and <scene/> elements within the <ThreeCanvas/> element,

• There are <directionalLight/> and <mesh/> elements within the <scene/> element.

• Inside the <mesh/> element, <boxGeometry/> and <meshStandardMaterial/> elements exist.

The relationship between them is not necessarily that of parent and child. By using attach, a child element can become a property of the parent element. In addition, the use of attach can be omitted in the case of geometry or material because the specific relationship is clear.

// main.jsx
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
createRoot(document.getElementById('root')).render(
    <App />
)

// App.jsx
import { ThreeCanvas } from 'threefy'
const App = () => {
    return <ThreeCanvas>
        <perspectiveCamera args={[ 60, 1.23, 0.1, 1000 ]} position={[ 0, 0, 50 ]}/>
        <scene>
            <ambientLight args={[ 0xffffff, 0.5 ]}/>
            <directionalLight args={[ 0xffffff, 1 ]} position={[ 1, 2, 3 ]}/>
            <mesh>
                <boxGeometry args={[ 20, 20, 20 ]}/>
                <meshStandardMaterial color={'yellow'}/>
            </mesh>
        </scene>
    </ThreeCanvas>
}