Sandbox
drcmda
/
Starwars-(forked)
A
App.js - nodebox - CodeSandbox
    • 1

    Explorer

      Drag a view here to display.

      Sandbox Info

        nodebox

        public
        src
        App.js
        Effects.js
        index.js
        styles.css
        .prettierrc
        package.json
        thumbnail.png

        Dependencies

          @react-three/drei
          9.17.1
          @react-three/fiber
          8.2.0
          @react-three/postprocessing
          2.6.0
          @types/three
          0.142.0
          leva
          0.9.29
          react
          18.2.0
          react-dom
          18.2.0
          react-scripts
          5.0.1
          three
          0.142.0

          Outline

          Show All Commands
          Ctrl+Shift+P
          Go to File
          Ctrl+P
          Find in Files
          Ctrl+Shift+F
          Toggle Full Screen
          F11
          Show Settings
          Ctrl+,
          App.js
          src
          App.js
          Probe
          useLayoutEffect() callback
          emissiveIntensity
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          60
          61
          62
          63
          64
          65
          66
          67
          68
          69
          70
          71
          import * as THREE from 'three'
          import { useLayoutEffect } from 'react'
          import { Canvas, useFrame } from '@react-three/fiber'
          import { useGLTF, Float, Preload } from '@react-three/drei'
          import { Effects } from './Effects'
          export default function App() {
            return (
              <Canvas gl={{ antialias: false, stencil: false }} camera={{ position: [5, 0, 0], fov: 80 }}>
                <ambientLight intensity={0.6} />
                <spotLight
                  angle={0.12}
                  penumbra={0.1}
                  position={[10, 0, -10]}
                  intensity={40}
                  onUpdate={(self) => {
                    self.target.position.set(-10, 0, 0)
                    self.target.updateMatrixWorld()
                  }}
                />
                <Hall position={[0, 0.98, 0]} />
                <Darth position={[-3, -0.39, 0.2]} rotation={[0, 2, 0]} scale={0.006} />
                <Float>
                  <Probe position={[-1.75, 0.25, -0.85]} scale={0.025} rotation={[0, Math.PI / 2, 0]} />
                </Float>
                <Effects />
                <Rig from={-Math.PI / 2} to={Math.PI / 2.66} />
                <Preload all />
              </Canvas>
            )
          }
          function Rig() {
            useFrame((state) => {
              state.camera.position.lerp({ x: 0, y: -state.pointer.y / 4, z: state.pointer.x / 2 }, 0.1)
              state.camera.lookAt(-1, 0, 0)
            })
          }
          function Hall({ ...props }) {
            const { scene } = useGLTF('/hall-transformed.glb')
            return <primitive object={scene} {...props} />
          }
          function Probe({ ...props }) {
            const { scene, materials } = useGLTF('/probe-transformed.glb')
            useLayoutEffect(() => {
              Object.values(materials).forEach((material) => (material.roughness = 0))
              Object.assign(materials.light, {
                color: new THREE.Color('#ff2060'),
                emissive: new THREE.Color(1, 0, 0),
                emissiveIntensity: 2,
                toneMapped: false
              })
            }, [])
            return <primitive object={scene} {...props} />
          }
          function Darth({ ...props }) {
            const { scene, materials } = useGLTF('/darth-transformed.glb')
            useLayoutEffect(() => {
              Object.assign(materials.Sabel_svart, {
                color: new THREE.Color('#ff2060'),
                emissive: new THREE.Color(1, 0, 0),
                emissiveIntensity: 2,
                toneMapped: false
              })
            }, [])
            return <primitive object={scene} {...props} />
          }
          Press desired key combination and then press ENTER.
          Show All Commands
          Ctrl+Shift+P
          Go to File
          Ctrl+P
          Find in Files
          Ctrl+Shift+F
          Toggle Full Screen
          F11
          Show Settings
          Ctrl+,
          Preview

              Drag a view here to display.

                  Drag a view here to display.
                  CodeSandbox - Sandbox (Web)
                  0 0
                  1
                  Prettier
                  Layout: US
                  JavaScript JSX
                  LF
                  UTF-8
                  Spaces: 2
                  Ln 52, Col 27
                  Open preview

                  🍪 Yes, we use cookies

                  This website utilizes cookies to enable essential site functionality and analytics. You may change your settings at any time or accept the default settings. You may close this banner to continue with only essential cookies.
                  Read more about this in our privacy and cookie statement.