feat(editor): component window (scenePrefabs refactored)

packages/engine/src/audio/components/PositionalAudioComponent.ts

@@ -56,6 +56,8 @@ export const PositionalAudioComponent = defineComponent({
   jsonID: 'audio',
 
   onInit: (entity) => {
+    setComponent(entity, MediaComponent, { paths: ['__$project$__/default-project/assets/SampleAudio.mp3'] })
+
     return {
       // default values as suggested at https://medium.com/@kfarr/understanding-web-audio-api-positional-audio-distance-models-for-webxr-e77998afcdff
       distanceModel: 'inverse' as DistanceModelType,
@@ -70,6 +72,8 @@ export const PositionalAudioComponent = defineComponent({
   },
 
   onSet: (entity, component, json) => {
+    setComponent(entity, MediaComponent)
+
     if (!json) return
     if (typeof json.distanceModel === 'number' && component.distanceModel.value !== json.distanceModel)
       component.distanceModel.set(json.distanceModel)
@@ -85,8 +89,6 @@ export const PositionalAudioComponent = defineComponent({
       component.coneOuterAngle.set(json.coneOuterAngle)
     if (typeof json.coneOuterGain === 'number' && component.coneOuterGain.value !== json.coneOuterGain)
       component.coneOuterGain.set(json.coneOuterGain)
-
-    setComponent(entity, MediaComponent, { paths: ['__$project$__/default-project/assets/SampleAudio.mp3'] })
   },
 
   toJSON: (entity, component) => {

packages/engine/src/scene/components/CloudComponent.ts

@@ -59,6 +59,8 @@ export const CloudComponent = defineComponent({
     } as CloudComponentType
   },
   onSet: (entity, component, json) => {
+    setComponent(entity, ShadowComponent)
+
     if (!json) return
     if (typeof json.texture === 'string') component.texture.set(json.texture)
     if (typeof json.worldScale === 'object')
@@ -73,8 +75,6 @@ export const CloudComponent = defineComponent({
       component.spriteScaleRange.set(new Vector2(json.spriteScaleRange.x, json.spriteScaleRange.y))
     if (typeof json.fogColor === 'number') component.fogColor.set(new Color(json.fogColor))
     if (typeof json.fogRange === 'object') component.fogRange.set(new Vector2(json.fogRange.x, json.fogRange.y))
-
-    setComponent(entity, ShadowComponent)
   },
   toJSON(entity, component) {
     return {

packages/engine/src/scene/components/GroundPlaneComponent.ts

@@ -64,6 +64,8 @@ export const GroundPlaneComponent = defineComponent({
   },
 
   onSet(entity, component, json) {
+    setComponent(entity, ShadowComponent)
+
     if (!json) return
 
     if (matches.object.test(json.color) || matches.string.test(json.color) || matches.number.test(json.color))
@@ -76,8 +78,6 @@ export const GroundPlaneComponent = defineComponent({
      */
     if (!getState(EngineState).sceneLoaded && hasComponent(entity, SceneObjectComponent))
       setComponent(entity, SceneAssetPendingTagComponent)
-
-    setComponent(entity, ShadowComponent)
   },
 
   toJSON(entity, component) {

packages/engine/src/scene/components/ImageComponent.ts

@@ -78,7 +78,7 @@ export const ImageComponent = defineComponent({
 
   onInit: (entity) => {
     return {
-      source: '',
+      source: '__$project$__/default-project/assets/sample_etc1s.ktx2',
       alphaMode: ImageAlphaMode.Opaque as ImageAlphaModeType,
       alphaCutoff: 0.5,
       projection: ImageProjection.Flat as ImageProjectionType,
@@ -99,8 +99,9 @@ export const ImageComponent = defineComponent({
   },
 
   onSet: (entity, component, json) => {
+    setComponent(entity, ShadowComponent)
+
     if (!json) return
-    if (!component.source.value) component.source.set('__$project$__/default-project/assets/sample_etc1s.ktx2')
     // backwards compatability
     if (typeof json.source === 'string' && json.source !== component.source.value) component.source.set(json.source)
     if (typeof json.alphaMode === 'string' && json.alphaMode !== component.alphaMode.value)
@@ -110,8 +111,6 @@ export const ImageComponent = defineComponent({
     if (typeof json.projection === 'string' && json.projection !== component.projection.value)
       component.projection.set(json.projection)
     if (typeof json.side === 'number' && json.side !== component.side.value) component.side.set(json.side)
-
-    setComponent(entity, ShadowComponent)
   },
 
   onRemove: (entity, component) => {

packages/engine/src/scene/components/InteriorComponent.ts

@@ -51,12 +51,12 @@ export const InteriorComponent = defineComponent({
     } as InteriorComponentType
   },
   onSet: (entity, component, json) => {
+    setComponent(entity, ShadowComponent)
+
     if (!json) return
     if (typeof json.cubeMap === 'string') component.cubeMap.set(json.cubeMap)
     if (typeof json.tiling === 'number') component.tiling.set(json.tiling)
     if (typeof json.size === 'object') component.size.set(new Vector2(json.size.x, json.size.y))
-
-    setComponent(entity, ShadowComponent)
   },
   toJSON(entity, component) {
     return {

packages/engine/src/scene/components/ModelComponent.ts

@@ -81,6 +81,10 @@ export const ModelComponent = defineComponent({
   },
 
   onSet: (entity, component, json) => {
+    setComponent(entity, EnvmapComponent)
+    setComponent(entity, LoopAnimationComponent)
+    setComponent(entity, ShadowComponent)
+
     if (!json) return
     if (typeof json.src === 'string' && json.src !== component.src.value) component.src.set(json.src)
     if (typeof json.generateBVH === 'boolean' && json.generateBVH !== component.generateBVH.value)
@@ -91,10 +95,6 @@ export const ModelComponent = defineComponent({
      */
     if (!getState(EngineState).sceneLoaded && hasComponent(entity, SceneObjectComponent))
       setComponent(entity, SceneAssetPendingTagComponent)
-
-    setComponent(entity, EnvmapComponent)
-    setComponent(entity, LoopAnimationComponent)
-    setComponent(entity, ShadowComponent)
   },
 
   onRemove: (entity, component) => {

packages/engine/src/scene/components/OceanComponent.ts

@@ -62,6 +62,8 @@ export const OceanComponent = defineComponent({
     }
   },
   onSet: (entity, component, json) => {
+    setComponent(entity, ShadowComponent)
+
     if (!json) return
     if (typeof json.normalMap === 'string') component.normalMap.set(json.normalMap)
     if (typeof json.distortionMap === 'string') component.distortionMap.set(json.distortionMap)
@@ -96,8 +98,6 @@ export const OceanComponent = defineComponent({
         ocean.update(dt)
       })
     }
-
-    setComponent(entity, ShadowComponent)
   },
   toJSON: (entity, component) => {
     return {

packages/engine/src/scene/components/ParticleSystemComponent.ts

@@ -750,6 +750,8 @@ export const ParticleSystemComponent = defineComponent({
     } as ParticleSystemComponentType
   },
   onSet: (entity, component, json) => {
+    setComponent(entity, ShadowComponent)
+
     !!json?.systemParameters &&
       component.systemParameters.set({
         ...JSON.parse(JSON.stringify(component.systemParameters.value)),
@@ -759,8 +761,6 @@ export const ParticleSystemComponent = defineComponent({
     !!json?.behaviorParameters && component.behaviorParameters.set(JSON.parse(JSON.stringify(json.behaviorParameters)))
     ;(!!json?.systemParameters || !!json?.behaviorParameters) &&
       component._refresh.set((component._refresh.value + 1) % 1000)
-
-    setComponent(entity, ShadowComponent)
   },
   onRemove: (entity, component) => {
     if (component.system.value) {

packages/engine/src/scene/components/PortalComponent.ts

@@ -106,6 +106,8 @@ export const PortalComponent = defineComponent({
   },
 
   onSet: (entity, component, json) => {
+    setComponent(entity, ShadowComponent)
+
     if (!json) return
     if (matches.string.test(json.linkedPortalId)) component.linkedPortalId.set(json.linkedPortalId)
     if (matches.string.test(json.location)) component.location.set(json.location)
@@ -122,7 +124,6 @@ export const PortalComponent = defineComponent({
           new Quaternion().setFromEuler(new Euler().setFromVector3(json.spawnRotation as any))
         )
     }
-    setComponent(entity, ShadowComponent)
   },
 
   toJSON: (entity, component) => {

packages/engine/src/scene/components/SplineComponent.ts

@@ -43,11 +43,11 @@ export const SplineComponent = defineComponent({
   },
 
   onSet: (entity, component, json) => {
+    setComponent(entity, ShadowComponent)
+
     if (!json) return
     if (typeof json.splinePositions !== 'undefined')
       component.splinePositions.set(json.splinePositions.map((pos) => new Vector3(pos.x, pos.y, pos.z)))
-
-    setComponent(entity, ShadowComponent)
   },
 
   toJSON(entity, component) {

packages/engine/src/scene/components/VideoComponent.ts

@@ -80,6 +80,8 @@ export const VideoComponent = defineComponent({
   jsonID: 'video',
 
   onInit: (entity) => {
+    setComponent(entity, MediaComponent, { paths: ['__$project$__/default-project/assets/SampleAudio.mp3'] })
+
     const videoGroup = new Group()
     videoGroup.name = `video-group-${entity}`
     const videoMesh = new Mesh(PLANE_GEO, new MeshBasicMaterial())
@@ -108,15 +110,15 @@ export const VideoComponent = defineComponent({
   },
 
   onSet: (entity, component, json) => {
+    setComponent(entity, MediaComponent)
+    setComponent(entity, PositionalAudioComponent)
+    setComponent(entity, ShadowComponent)
+
     if (!json) return
     if (typeof json.mediaUUID === 'string') component.mediaUUID.set(json.mediaUUID)
     if (typeof json.side === 'number') component.side.set(json.side)
     if (json.size) component.size.set(new Vector2(json.size.x, json.size.y))
     if (json.fit) component.fit.set(json.fit)
-
-    setComponent(entity, MediaComponent, { paths: ['__$project$__/default-project/assets/SampleAudio.mp3'] })
-    setComponent(entity, PositionalAudioComponent)
-    setComponent(entity, ShadowComponent)
   },
 
   onRemove: (entity, component) => {

packages/engine/src/scene/components/VolumetricComponent.ts

@@ -45,12 +45,12 @@ export const VolumetricComponent = defineComponent({
   },
 
   onSet: (entity, component, json) => {
-    if (typeof json?.useLoadingEffect === 'boolean' && json.useLoadingEffect !== component.useLoadingEffect.value)
-      component.useLoadingEffect.set(json.useLoadingEffect)
-
     setComponent(entity, MediaComponent)
     setComponent(entity, PositionalAudioComponent)
     setComponent(entity, ShadowComponent)
+
+    if (typeof json?.useLoadingEffect === 'boolean' && json.useLoadingEffect !== component.useLoadingEffect.value)
+      component.useLoadingEffect.set(json.useLoadingEffect)
   }
 })
 

packages/engine/src/scene/components/WaterComponent.ts

@@ -45,9 +45,9 @@ export const WaterComponent = defineComponent({
   },
 
   onSet: (entity, _component, json) => {
-    if (!json) return
-
     setComponent(entity, ShadowComponent)
+
+    if (!json) return
   },
 
   toJSON(entity, component) {