As a beginner in Threejs, I am trying to incorporate the use of side="THREE.BackSide" with an external model file named room.glb. My development environment consists of nextjs 13 (with typescript and app directory enabled) along with @react-three/fiber and react-three/drei.
Initially, this setup worked as intended:
<Canvas>
<OrbitControls enableZoom dampingFactor={0.01}/>
<mesh scale={[1,5,9]}>
<boxGeometry />
<meshStandardMaterial color="grey" side={THREE.BackSide} />
</mesh>
<ambientLight intensity={1}/>
<pointLight intensity={5} position={[10,90,0]}/>
</Canvas>
However, when I attempted to load an external file using the following code:
<Canvas>
<OrbitControls enableZoom dampingFactor={0.009} enableRotate maxAzimuthAngle={0} maxPolarAngle={1.5} minPolarAngle={1} maxDistance={10} minAzimuthAngle={0.5}/>
<mesh scale={[depth/18,height/18,width/18]}>
<primitive object={gltf.scene} ref={meshRef}/>
<meshStandardMaterial color={"red"} side={THREE.BackSide}/>
<ambientLight intensity={1}/>
<pointLight intensity={5} position={[10,90,0]}/>
</Canvas>
I encountered issues and the code did not work as expected.
I attempted to convert my .glb file into JSX using the gltfjsx cli tool, but even that did not produce the desired results. I am unsure of how to iterate through all nodes and set their side prop to BackSide.
Here is my gltfjsx file:
import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'
import { GLTF } from 'three-stdlib'
type GLTFResult = GLTF & {
nodes: {
Cube: THREE.Mesh
}
materials: {
['Material.001']: THREE.MeshStandardMaterial
}
}
export function Model(props: JSX.IntrinsicElements['group']) {
const { nodes, materials } = useGLTF('/labRoom.glb') as GLTFResult
return (
<group {...props} dispose={null}>
<mesh geometry={nodes.Cube.geometry} material={materials['Material.001']} scale={[2.52, 2.64, 2.49]}/>
</group>
)
}
useGLTF.preload('/labRoom.glb')