@vyr/three-browser 0.0.1

package/src/fragment/TextFragment.vue

@@ -0,0 +1,98 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Node.material')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.material" :clearable="true" dragkey="material" :draggable="draggable"
+                    trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Text.font')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.font" :clearable="true" :draggable="draggable" trigger="blur"
+                    dragkey="font"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Text.size')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.size" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Text.maxWidth')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.maxWidth" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Text.lineHeight')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.lineHeight" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Text.letterSpacing')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.letterSpacing" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Text.text')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.text" trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.depth')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.depth" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.flattenUVsToPlane')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.flattenUVsToPlane" :data="Geometry.extrudeUvOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.curveSegments')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.curveSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.steps')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.steps" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { TextDescriptor } from '@vyr/three';
+import { VyrInput, VyrInputNumber, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
+import { language } from '../locale'
+import { useDescriptor } from '../common';
+import { Geometry } from '../option';
+
+const descriptor = useDescriptor<TextDescriptor>()
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/animation/AnimationActionFragment.vue

@@ -0,0 +1,110 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.clip')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.clip" :data="animationOptions" :clearable="true"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.play')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.play" :data="option.Animation.playOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.enabled')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.enabled" :data="option.Animation.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.duration')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.duration" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.startTime')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.startTime" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.weight')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.weight" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.repetitions')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.repetitions" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.loop')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.loop" :data="Animation.loopOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.blendMode')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.blendMode" :data="Animation.blendModeOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.zeroSlopeAtStart')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.zeroSlopeAtStart"
+                    :data="option.Animation.zeroSlopeAtStartOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.AnimationAction.zeroSlopeAtEnd')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.zeroSlopeAtEnd"
+                    :data="option.Animation.zeroSlopeAtEndOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { DataService, runtime } from '@vyr/runtime';
+import { AnimationActionDescriptor } from '@vyr/three';
+import { option } from '@vyr/builtin'
+import { VyrRow, VyrCol, VyrLabel, VyrInputNumber, VyrSelect } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+import { Animation } from '../../option'
+
+const props = defineProps<{ raw: string }>()
+const descriptor = useDescriptor<AnimationActionDescriptor>()
+const dataService = runtime.get<DataService>('data')
+
+const animationOptions = computed(() => {
+    const raw = AnimationActionDescriptor.get<AnimationActionDescriptor>(props.raw)
+    if (raw === null) return []
+    const { parent } = raw.traceAncestor(false)
+    if (parent === null) return []
+
+    const animations = dataService.inspector.animations[parent.uuid] ?? []
+    return animations.map(item => ({ label: item, value: item }))
+})
+
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/geometry/BoxGeometryFragment.vue

@@ -0,0 +1,44 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.width')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.width" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.widthSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.height')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.height" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.heightSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.depth')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.depth" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.depthSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { BoxGeometryDescriptor } from '@vyr/three';
+import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+
+const descriptor = useDescriptor<BoxGeometryDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/geometry/BufferGeometryFragment.vue

@@ -0,0 +1,26 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.BufferGeometry.buffer')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.buffer" :clearable="true" :draggable="draggable" trigger="blur"
+                    dragkey="buffer"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { DraggableService, runtime } from '@vyr/runtime';
+import { BufferGeometryDescriptor } from '@vyr/three';
+import { VyrInput, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+
+const descriptor = useDescriptor<BufferGeometryDescriptor>()
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/geometry/CircleGeometryFragment.vue

@@ -0,0 +1,35 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.radius')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.radius" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.segments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.CircleGeometry.theta')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.thetaStart" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.thetaLength" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { CircleGeometryDescriptor } from '@vyr/three';
+import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+
+const descriptor = useDescriptor<CircleGeometryDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/geometry/CylinderGeometryFragment.vue

@@ -0,0 +1,60 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.height')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.height" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.radius')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.radiusTop" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.radiusBottom" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.CylinderGeometry.radial')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.radialSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.heightSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.CylinderGeometry.theta')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.thetaStart" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.thetaLength" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.CylinderGeometry.openEnded')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.openEnded" :data="Geometry.cylinderOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { CylinderGeometryDescriptor } from '@vyr/three';
+import { VyrInputNumber, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+import { Geometry } from '../../option';
+
+const descriptor = useDescriptor<CylinderGeometryDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/geometry/ExtrudeGeometryFragment.vue

@@ -0,0 +1,111 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.ExtrudeGeometry.shapes')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.shapes" :clearable="true" :draggable="draggable" trigger="blur"
+                    dragkey="shapes"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row v-if="$slots.radius">
+        <vyr-label :label="language.get('inspector.Geometry.radius')">
+            <vyr-col>
+                <slot name="radius"></slot>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <slot></slot>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.depth')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.depth" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.offset')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.offset.x" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.offset.y" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.flattenUVsToPlane')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.flattenUVsToPlane" :data="Geometry.extrudeUvOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.curveSegments')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.curveSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.steps')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.steps" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.ExtrudeGeometry.bevelEnabled')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.bevelEnabled" :data="option.stateOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <template v-if="descriptor.bevelEnabled">
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.ExtrudeGeometry.bevelThickness')">
+                <vyr-col>
+                    <vyr-input-number v-model="descriptor.bevelThickness" :allow-null="false"></vyr-input-number>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.ExtrudeGeometry.bevelSegments')">
+                <vyr-col>
+                    <vyr-input-number v-model="descriptor.bevelSegments" :allow-null="false"></vyr-input-number>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.ExtrudeGeometry.bevelSize')">
+                <vyr-col>
+                    <vyr-input-number v-model="descriptor.bevelSize" :allow-null="false"></vyr-input-number>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+        <vyr-row>
+            <vyr-label :label="language.get('inspector.ExtrudeGeometry.bevelOffset')">
+                <vyr-col>
+                    <vyr-input-number v-model="descriptor.bevelOffset" :allow-null="false"></vyr-input-number>
+                </vyr-col>
+            </vyr-label>
+        </vyr-row>
+    </template>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { DraggableService, runtime } from '@vyr/runtime';
+import { ExtrudeGeometryDescriptor } from '@vyr/three';
+import { option } from '@vyr/builtin'
+import { VyrInput, VyrInputNumber, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+import { Geometry } from '../../option';
+
+const descriptor = useDescriptor<ExtrudeGeometryDescriptor>()
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = computed(() => draggableService.get(draggableService.key.inspector))
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/geometry/PlaneGeometryFragment.vue

@@ -0,0 +1,35 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.width')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.width" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.widthSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.height')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.height" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.heightSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { PlaneGeometryDescriptor } from '@vyr/three';
+import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+
+const descriptor = useDescriptor<PlaneGeometryDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/geometry/RingGeometryFragment.vue

@@ -0,0 +1,45 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.radius')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.innerRadius" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.outerRadius" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.RingGeometry.sgments')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.thetaSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.phiSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.RingGeometry.theta')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.thetaStart" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.thetaLength" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { RingGeometryDescriptor } from '@vyr/three';
+import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+
+const descriptor = useDescriptor<RingGeometryDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/geometry/SphereGeometryFragment.vue

@@ -0,0 +1,51 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.Geometry.radius')">
+            <vyr-col>
+                <vyr-input-number v-model="descriptor.radius" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.SphereGeometry.segments')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.widthSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.heightSegments" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.SphereGeometry.phi')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.phiStart" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.phiLength" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.SphereGeometry.theta')">
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.thetaStart" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+            <vyr-col :span="12">
+                <vyr-input-number v-model="descriptor.thetaLength" :allow-null="false"></vyr-input-number>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { SphereGeometryDescriptor } from '@vyr/three';
+import { VyrInputNumber, VyrRow, VyrCol, VyrLabel } from '@vyr/design';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common';
+
+const descriptor = useDescriptor<SphereGeometryDescriptor>()
+</script>
+
+<style lang="less" scoped></style>

package/src/fragment/geometry/SurfaceGeometryFragment.vue

@@ -0,0 +1,18 @@
+<template>
+    <extrude-geometry-fragment>
+        <template #radius>
+            <vyr-input-number v-model="descriptor.radius" :allow-null="false"></vyr-input-number>
+        </template>
+    </extrude-geometry-fragment>
+</template>
+
+<script lang="ts" setup>
+import { SurfaceGeometryDescriptor } from '@vyr/three';
+import { VyrInputNumber } from '@vyr/design';
+import { useDescriptor } from '../../common';
+import ExtrudeGeometryFragment from './ExtrudeGeometryFragment.vue';
+
+const descriptor = useDescriptor<SurfaceGeometryDescriptor>()
+</script>
+
+<style lang="less" scoped></style>