add train collision

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@pmndrs/branding": "^0.0.8",
     "@react-three/cannon": "1.2.4",
-    "@react-three/drei": "5.3.4",
+    "@react-three/drei": "6.0.0",
     "@react-three/fiber": "6.2.2",
     "@react-three/postprocessing": "2.0.4",
     "@types/three": "0.129.1",

src/App.js

@@ -32,7 +32,7 @@ export function App() {
         <directionalLight
           ref={setLight}
           layers={layers}
-          position={[100, 100, 50]}
+          position={[0, 100, 250]}
           intensity={1}
           shadow-bias={-0.001}
           shadow-mapSize={[4096, 4096]}
@@ -43,14 +43,14 @@ export function App() {
           castShadow
         />
         <Physics broadphase="SAP" contactEquationRelaxation={4} friction={1e-3} allowSleep>
-          <Heightmap elementSize={1 / 2} position={[327.2, -20.1, -473.5]} rotation={[-Math.PI / 2, 0, -Math.PI]} />
+          <Heightmap elementSize={1 / 2} position={[327.2 - 80, -20.1, -473.5 + 210]} rotation={[-Math.PI / 2, 0, -Math.PI]} />
           <Vehicle>
             {/* Mount the main-lights target as a child to the vehicle, so that light follows it */}
             {light && <primitive object={light.target} />}
           </Vehicle>
-          <Ramp args={[30, 6, 5]} position={[105, -0.8, -55]} rotation={[0, 0.45, Math.PI / 16]} />
+          <Ramp args={[30, 6, 6]} position={[5, -1, 165]} rotation={[0, 0.45, Math.PI / 16]} />
+          <Track position={[0, -0.1, 0]} />
         </Physics>
-        <Track position={[80, -0.1, -210]} />
         <Environment preset="night" />
         {map && <Minimap />}
         {editor && <OrbitControls />}

src/models/Ramp.js

@@ -1,7 +1,7 @@
 import { useBox } from '@react-three/cannon'
 
 export function Ramp({ args, ...props }) {
-  const [ref] = useBox(() => ({ type: 'Static', args, ...props }), undefined, [props])
+  const [ref] = useBox(() => ({ type: 'Static', args, ...props }), undefined, [args, props])
   return (
     <mesh ref={ref}>
       <boxGeometry args={args} />

src/models/track/Track.js

@@ -5,16 +5,54 @@ import * as THREE from 'three'
 import { useLayoutEffect, useRef } from 'react'
 import { useFrame } from '@react-three/fiber'
 import { MeshDistortMaterial, useGLTF, useAnimations, PositionalAudio } from '@react-three/drei'
+import { useBox } from '@react-three/cannon'
 import { useStore, levelLayer } from '../../store'
 
 useGLTF.preload('/models/track-draco.glb')
 
-export function Track(props) {
+function Train({ args = [38, 8, 10], position = [-145.84, 3.42, 54.67], rotation = [0, -0.09, 0], config }) {
   const group = useRef()
+  const debug = useStore((state) => state.debug)
   const ready = useStore((state) => state.ready)
-  const level = useStore((state) => state.level)
   const { animations, nodes: n, materials: m } = useGLTF('/models/track-draco.glb')
+  const [ref, api] = useBox(() => ({ mass: 10000, type: 'Kinematic', args, position, rotation }), undefined, [args, position, rotation])
   const { actions } = useAnimations(animations, group)
+  useLayoutEffect(() => void actions.train.play(), [actions])
+
+  useFrame(() => {
+    api.position.set(group.current.position.x, group.current.position.y, group.current.position.z)
+    api.rotation.set(group.current.rotation.x, group.current.rotation.y - 0.09, group.current.rotation.z)
+  })
+
+  return (
+    <>
+      <group ref={group} name="train" position={[-145.84, 3.42, 54.67]} rotation={[0, -0.09, 0]}>
+        <mesh geometry={n.train_1.geometry} material={m.custom7Clone} {...config} />
+        <mesh geometry={n.train_2.geometry} material={m.blueSteelClone} {...config} />
+        <mesh geometry={n.train_3.geometry} material={m.custom12Clone} {...config} />
+        <mesh geometry={n.train_4.geometry} material={m.custom14Clone} {...config} />
+        <mesh geometry={n.train_5.geometry} material={m.defaultMatClone} {...config} />
+        <mesh geometry={n.train_6.geometry} material={m.glassClone} {...config} />
+        <mesh geometry={n.train_7.geometry} material={m.steelClone} {...config} />
+        <mesh geometry={n.train_8.geometry} material={m.lightRedClone} {...config} />
+        <mesh geometry={n.train_9.geometry} material={m.darkClone} {...config} />
+        {ready && <PositionalAudio url="/sounds/train.mp3" loop autoplay distance={5} />}
+      </group>
+      {debug && (
+        <mesh ref={ref}>
+          <boxGeometry args={args} />
+          <meshBasicMaterial color="hotpink" transparent opacity={0.7} />
+        </mesh>
+      )}
+    </>
+  )
+}
+
+export function Track(props) {
+  const group = useRef()
+  const ready = useStore((state) => state.ready)
+  const level = useStore((state) => state.level)
+  const { nodes: n, materials: m } = useGLTF('/models/track-draco.glb')
   const config = { receiveShadow: true, castShadow: true, 'material-roughness': 1 }
 
   const birds = useRef()
@@ -24,26 +62,11 @@ export function Track(props) {
     clouds.current.children.forEach((bird, index) => (bird.rotation.y += delta / 25 / index))
   })
 
-  useLayoutEffect(() => {
-    console.log(actions)
-    actions.train.play()
-  }, [actions])
   useLayoutEffect(() => void level.current.traverse((child) => child.layers.enable(levelLayer)), [])
 
   return (
     <group ref={group} {...props} dispose={null}>
-      <group name="train" position={[-145.84, 3.42, 54.67]} rotation={[0, -0.09, 0]}>
-        <mesh geometry={n.train_1.geometry} material={m.custom7Clone} />
-        <mesh geometry={n.train_2.geometry} material={m.blueSteelClone} />
-        <mesh geometry={n.train_3.geometry} material={m.custom12Clone} />
-        <mesh geometry={n.train_4.geometry} material={m.custom14Clone} />
-        <mesh geometry={n.train_5.geometry} material={m.defaultMatClone} />
-        <mesh geometry={n.train_6.geometry} material={m.glassClone} />
-        <mesh geometry={n.train_7.geometry} material={m.steelClone} />
-        <mesh geometry={n.train_8.geometry} material={m.lightRedClone} />
-        <mesh geometry={n.train_9.geometry} material={m.darkClone} />
-        {ready && <PositionalAudio url="/sounds/train.mp3" loop autoplay distance={5} />}
-      </group>
+      <Train config={config} />
       <mesh geometry={n.track_2.geometry} material={m['Material.001']} {...config} />
       <mesh geometry={n.tube.geometry} material={m['default']} {...config} />
       <group ref={level}>

src/models/vehicle/Chassis.js

@@ -24,8 +24,8 @@ const Chassis = forwardRef(({ args = [2, 1.1, 4.7], mass = 500, children, ...pro
   const { nodes: n, materials: m } = useGLTF('/models/chassis-draco.glb')
 
   const onCollide = () => {
-    crashAudio.current.setVolume((0.4 * useStore.getState().speed) / 10)
-    if (!crashAudio.current.isPlaying) crashAudio.current.play()
+    crashAudio.current?.setVolume((0.4 * useStore.getState().speed) / 10)
+    if (!crashAudio.current?.isPlaying) crashAudio.current?.play()
   }
   const [, api] = useBox(() => ({ mass, args, allowSleep: false, onCollide, ...props }), ref)
 

src/models/vehicle/Vehicle.js

@@ -11,7 +11,7 @@ import { Skid } from '../../effects/Skid'
 
 const v = new THREE.Vector3()
 
-export function Vehicle({ angularVelocity = [0, 0.5, 0], children, position = [0, 0.5, 0], rotation = [0, Math.PI / 2, 0] }) {
+export function Vehicle({ angularVelocity = [0, 0.5, 0], children, position = [-115, 0.5, 220], rotation = [0, Math.PI / 2 + 0.5, 0] }) {
   const defaultCamera = useRef()
   const birdEyeCamera = useRef()
 

src/ui/Minimap.js

@@ -14,7 +14,7 @@ function useLevelGeometricProperties() {
   const level = useStore((state) => state.level)
 
   useLayoutEffect(() => {
-    level.current.parent.updateWorldMatrix()
+    level.current.parent?.updateWorldMatrix()
     box.setFromObject(level.current)
     box.getCenter(center)
     box.getSize(dimensions)

yarn.lock

@@ -1744,10 +1744,10 @@
   resolved "https://registry.yarnpkg.com/@react-three/cannon/-/cannon-1.2.4.tgz#2ffe40413f1e7d4cb46a8241840669461ec4cfba"
   integrity sha512-KzAy1zA0ThjwU0nNejtRokfRw9T4AIgeqZwXqbuB3FBYkJ2hxLae5KxAcqqv5Cr64y03XSUDuqTDnqkwPaimdQ==
 
-"@react-three/drei@5.3.4":
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/@react-three/drei/-/drei-5.3.4.tgz#70712d4dd83dbd2fc6f0a98a75e2d76effd64459"
-  integrity sha512-9ysZbP5Sei+Nt/ks3ADCpMDW3OSedptAO8izzC7WBgYiTfjdxgDfcnj8CLRLz7YNIOIxl5PeOVSlg1nDB3MP0A==
+"@react-three/drei@6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@react-three/drei/-/drei-6.0.0.tgz#9be42a2efa135555b921f61a9144d7eb123e7abd"
+  integrity sha512-KyUFkJS+dVOBb7El6Jqzz0hNmQPWELmaU5LaOw7mu35oAhg6KP+ho3y1yEEKWYG9I4wRl71sva5M6CCdHki8Zw==
   dependencies:
     "@babel/runtime" "^7.11.2"
     blob-polyfill "^5.0.20210201"