import React from 'react' ; import { Story , Meta } from '@storybook/react' ; import { useLoader , Canvas } from '@react-three/fiber' ; import { OrbitControls } from '@react-three/drei' ; import * as THREE from 'three' ; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' ; import Lightmap , { AutoUV2Ignore } from '../core/Lightmap' ; import Spinner from './Spinner' ; import { DebugOverlayRenderer , DebugOverlayWidgets } from './DebugOverlayScene' ; import sceneUrl from './cylinder-smooth.glb' ; export default { title : 'Smooth normals scene' , parameters : { layout : 'fullscreen' } , decorators : [ ( story ) => < div style = { { height : '100vh' } } > { story ( ) } < /div>] } as Meta ; const MainSceneContents = ( ) => { const { nodes } = useLoader ( GLTFLoader , sceneUrl ) ; const mesh = nodes . Cylinder ; if ( mesh instanceof THREE . Mesh && mesh . material instanceof THREE . MeshStandardMaterial ) { mesh . material . metalness = 0 ; } mesh . castShadow = true ; mesh . receiveShadow = true ; return ( < AutoUV2Ignore > < mesh position = { [ 0 , 0 , - 2 ] } receiveShadow > < planeBufferGeometry attach = "geometry" args = { [ 20 , 20 ] } / > < meshLambertMaterial attach = "material" color = "#808080" emissive = "#ffffff" / > < /mesh> < primitive key = { mesh . uuid } object = { mesh } dispose = { null } / > < /AutoUV2Ignore>); } ; export const Main = ( ) => ( < Canvas camera = { { position : [ - 4 , - 4 , 8 ] , up : [ 0 , 0 , 1 ] } } shadows onCreated = { ( { gl } ) => { gl . toneMapping = THREE . ACESFilmicToneMapping ; gl . toneMappingExposure = 0.9 ; gl . outputEncoding = THREE . sRGBEncoding ; } } > < DebugOverlayRenderer > < React . Suspense fallback = { < Spinner />}> < Lightmap textureFilter = { THREE . NearestFilter } samplerSettings = { { offset : 0.05 } } > < MainSceneContents /> < DebugOverlayWidgets / > < /Lightmap> < /React.Suspense> < /DebugOverlayRenderer> < OrbitControls enableDamping dampingFactor = { 0.1 } rotateSpeed = { 0.5 } target = { new THREE . Vector3 ( 0 , 0 , 1 ) } / > < /Canvas>);