better gltf viewer, add duck

assets/GLTF/Duck/Duck.gltf

@@ -0,0 +1,157 @@
+{
+  "asset": {
+    "generator": "COLLADA2GLTF",
+    "version": "2.0"
+  },
+  "scene": 0,
+  "scenes": [
+    {
+      "nodes": [0]
+    }
+  ],
+  "nodes": [
+    {
+      "children": [2, 1],
+      "matrix": [
+        0.009999999776482582, 0.0, 0.0, 0.0, 0.0, 0.009999999776482582, 0.0, 0.0, 0.0, 0.0, 0.009999999776482582, 0.0,
+        0.0, 0.0, 0.0, 1.0
+      ]
+    },
+    {
+      "matrix": [
+        -0.7289686799049377, 0.0, -0.6845470666885376, 0.0, -0.4252049028873444, 0.7836934328079224, 0.4527972936630249,
+        0.0, 0.5364750623703003, 0.6211478114128113, -0.571287989616394, 0.0, 400.1130065917969, 463.2640075683594,
+        -431.0780334472656, 1.0
+      ],
+      "camera": 0
+    },
+    {
+      "mesh": 0
+    }
+  ],
+  "cameras": [
+    {
+      "perspective": {
+        "aspectRatio": 1.5,
+        "yfov": 0.6605925559997559,
+        "zfar": 10000.0,
+        "znear": 1.0
+      },
+      "type": "perspective"
+    }
+  ],
+  "meshes": [
+    {
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 1,
+            "POSITION": 2,
+            "TEXCOORD_0": 3
+          },
+          "indices": 0,
+          "mode": 4,
+          "material": 0
+        }
+      ],
+      "name": "LOD3spShape"
+    }
+  ],
+  "accessors": [
+    {
+      "bufferView": 0,
+      "byteOffset": 0,
+      "componentType": 5123,
+      "count": 12636,
+      "max": [2398],
+      "min": [0],
+      "type": "SCALAR"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 0,
+      "componentType": 5126,
+      "count": 2399,
+      "max": [0.9995989799499512, 0.999580979347229, 0.9984359741210938],
+      "min": [-0.9990839958190918, -1.0, -0.9998319745063782],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 28788,
+      "componentType": 5126,
+      "count": 2399,
+      "max": [96.17990112304688, 163.97000122070313, 53.92519760131836],
+      "min": [-69.29850006103516, 9.929369926452637, -61.32819747924805],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 0,
+      "componentType": 5126,
+      "count": 2399,
+      "max": [0.9833459854125976, 0.9800369739532472],
+      "min": [0.026409000158309938, 0.01996302604675293],
+      "type": "VEC2"
+    }
+  ],
+  "materials": [
+    {
+      "pbrMetallicRoughness": {
+        "baseColorTexture": {
+          "index": 0
+        },
+        "metallicFactor": 0.0
+      },
+      "emissiveFactor": [0.0, 0.0, 0.0],
+      "name": "blinn3-fx"
+    }
+  ],
+  "textures": [
+    {
+      "sampler": 0,
+      "source": 0
+    }
+  ],
+  "images": [
+    {
+      "uri": "DuckCM.png"
+    }
+  ],
+  "samplers": [
+    {
+      "magFilter": 9729,
+      "minFilter": 9986,
+      "wrapS": 10497,
+      "wrapT": 10497
+    }
+  ],
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteOffset": 76768,
+      "byteLength": 25272,
+      "target": 34963
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 0,
+      "byteLength": 57576,
+      "byteStride": 12,
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 57576,
+      "byteLength": 19192,
+      "byteStride": 8,
+      "target": 34962
+    }
+  ],
+  "buffers": [
+    {
+      "byteLength": 102040,
+      "uri": "Duck0.bin"
+    }
+  ]
+}

resources.json

@@ -69,6 +69,27 @@
     ],
     "dependencies": []
   },
+  "assets/GLTF/Duck/Duck.gltf": {
+    "type": "file",
+    "tags": [
+      "Model"
+    ],
+    "dependencies": []
+  },
+  "assets/GLTF/Duck/Duck0.bin": {
+    "type": "file",
+    "tags": [
+      "unknown"
+    ],
+    "dependencies": []
+  },
+  "assets/GLTF/Duck/DuckCM.png": {
+    "type": "file",
+    "tags": [
+      "Image"
+    ],
+    "dependencies": []
+  },
   "assets/GLTF/Flight Helmet/FlightHelmet_Materials_GlassPlasticMat_BaseColor.ktx2": {
     "type": "file",
     "tags": [

src/examples/gltf.tsx

@@ -1,36 +1,35 @@
 import React, { useEffect } from 'react'
 import { useDrop } from 'react-dnd'
-import { Vector3 } from 'three'
 
-import { getMutableComponent, setComponent } from '@etherealengine/ecs/src/ComponentFunctions'
+import { getComponent, setComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { DndWrapper } from '@etherealengine/editor/src/components/dnd/DndWrapper'
-import { ModelComponent } from '@etherealengine/engine/src/scene/components/ModelComponent'
-import { useHookstate } from '@etherealengine/hyperflux'
-import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
-import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
-import { TransformComponent } from '@etherealengine/spatial/src/transform/components/TransformComponent'
+import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 
-import { Entity } from '@etherealengine/ecs'
+import { Engine } from '@etherealengine/ecs'
 
+import config from '@etherealengine/common/src/config'
 import { SupportedFileTypes } from '@etherealengine/editor/src/constants/AssetTypes'
-import { useRouteScene } from '../sceneRoute'
-import { useExampleEntity } from './utils/common/entityUtils'
+import { GLTFAssetState } from '@etherealengine/engine/src/gltf/GLTFState'
+import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
+import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
+import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
+import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
 
 export const metadata = {
   title: 'GLTF',
   description: ''
 }
 
-const GLTF = (props: { sceneEntity: Entity }) => {
+const defaultSource = config.client.fileServer + '/projects/ee-development-test-suite/assets/GLTF/Duck/Duck.gltf'
+
+const GLTF = () => {
   const filenames = useHookstate<string[]>([])
-  const entity = useExampleEntity(props.sceneEntity)
+
+  const source = useHookstate(defaultSource)
 
   useEffect(() => {
-    setComponent(entity, TransformComponent, { position: new Vector3(0, 2, -2) })
-    setComponent(entity, VisibleComponent)
-    setComponent(entity, NameComponent, 'GLTF Viewer')
-    setComponent(entity, ModelComponent)
-  }, [])
+    return GLTFAssetState.loadScene(source.value, source.value)
+  }, [source])
 
   const [{ canDrop, isOver, isDragging, isUploaded }, onDropTarget] = useDrop({
     // GLTF and GLB files seem to only come through as Native Files for this
@@ -46,8 +45,7 @@ const GLTF = (props: { sceneEntity: Entity }) => {
           filenames.set(files.map((file) => file.name))
 
           const gltfFile = files[0]
-          const model = getMutableComponent(entity, ModelComponent)
-          model.src.set(URL.createObjectURL(gltfFile))
+          source.set(URL.createObjectURL(gltfFile))
 
           console.log(gltfFile)
         } catch (err) {
@@ -84,9 +82,22 @@ const GLTF = (props: { sceneEntity: Entity }) => {
 }
 
 export default function GLTFViewer() {
-  const sceneEntity = useRouteScene()
+  useEffect(() => {
+    const bgColor = document.body.style.backgroundColor
+    document.body.style.backgroundColor = 'gray'
+    getMutableState(RendererState).gridVisibility.set(true)
+    getMutableState(RendererState).physicsDebug.set(true)
+    const entity = Engine.instance.viewerEntity
+    setComponent(entity, CameraOrbitComponent)
+    setComponent(entity, InputComponent)
+    getComponent(entity, CameraComponent).position.set(0, 3, 4)
 
-  return sceneEntity.value ? (
+    return () => {
+      document.body.style.backgroundColor = bgColor
+    }
+  }, [])
+
+  return (
     <div
       id="dnd-container"
       style={{
@@ -100,8 +111,8 @@ export default function GLTFViewer() {
       }}
     >
       <DndWrapper id="dnd-container">
-        <GLTF sceneEntity={sceneEntity.value} />
+        <GLTF />
       </DndWrapper>
     </div>
-  ) : null
+  )
 }

src/examples/utils/common/entityUtils.ts

@@ -18,8 +18,8 @@ export const setupEntity = (parent: Entity): Entity => {
   setComponent(entity, UUIDComponent, generateEntityUUID())
   setComponent(entity, TransformComponent)
   setComponent(entity, EntityTreeComponent, { parentEntity: parent })
-  const sceneID = getComponent(parent, SourceComponent)
-  setComponent(entity, SourceComponent, sceneID)
+  // const sceneID = getComponent(parent, SourceComponent)
+  // setComponent(entity, SourceComponent, sceneID)
 
   return entity
 }