111 lines
4.1 KiB
Vue
111 lines
4.1 KiB
Vue
<template>
|
|
<div v-show="forRendering">
|
|
<div class="position-relative">
|
|
<div ref="target"></div>
|
|
<div class="renderer-gizmo"></div>
|
|
</div>
|
|
<v-slide-group show-arrows>
|
|
<v-slide-group-item v-for="(a, i) in animations" :key="i" v-slot="{ isSelected }">
|
|
<v-btn :color="isSelected ? 'primary' : undefined" class="ma-2"
|
|
:prepend-icon="'mdi-' + (a.playing ? 'stop' : 'play')" rounded @click="toggleAnimation(a)">
|
|
{{ a.name }}
|
|
</v-btn>
|
|
</v-slide-group-item>
|
|
</v-slide-group>
|
|
</div>
|
|
<img v-if="obj && !forRendering && obj.type == 'object2d'" :src="`/asset/default/${obj.asset?.name}`" />
|
|
<video v-if="obj && !forRendering && obj.type == 'video'" controls :autoplay="autoplay ? 'autoplay' : ''"
|
|
:src="`/asset/default/${obj.asset?.name}`"></video>
|
|
<audio v-if="obj && !forRendering && obj.type == 'audio'" controls :autoplay="autoplay ? 'autoplay' : ''"
|
|
:src="`/asset/default/${obj.asset?.name}`" class="d-block w-100"></audio>
|
|
</template>
|
|
|
|
<script>
|
|
import { GameEngine } from '@/lib/GameEngine.js';
|
|
import { autoScale } from '@/lib/MeshUtils';
|
|
let gameEngine = null;
|
|
|
|
export default{
|
|
props:{
|
|
object: Object,
|
|
objectId: Number,
|
|
autoplay: Boolean
|
|
},
|
|
data(){
|
|
return {
|
|
animations: [],
|
|
obj: null
|
|
}
|
|
},
|
|
async mounted(){
|
|
if (this.object) {
|
|
this.obj = this.object;
|
|
}else{
|
|
this.obj = (await this.$api.gameObject.load(this.objectId)).data;
|
|
}
|
|
},
|
|
beforeUnmount() {
|
|
gameEngine?.dispose();
|
|
gameEngine = null;
|
|
},
|
|
watch:{
|
|
object(n){
|
|
this.obj = n;
|
|
},
|
|
async obj(){
|
|
if (!this.obj) return;
|
|
gameEngine = new GameEngine();
|
|
await gameEngine.init(this.$refs.target, {
|
|
gizmo: true,
|
|
xr: true,
|
|
mode: 'ObjectPreview'
|
|
});
|
|
await this.loadAsset();
|
|
}
|
|
},
|
|
computed:{
|
|
forRendering() {
|
|
return this.$p.objectTypes.find(t=> t.value == this.obj?.type)?.render
|
|
}
|
|
},
|
|
methods:{
|
|
async loadAsset() {
|
|
if (this.forRendering) {
|
|
gameEngine.resetScene();
|
|
if (this.obj.type == 'panorama2d') {
|
|
await gameEngine.loadPanorama(this.obj.asset.name);
|
|
// let t = await gameEngine.loadTexture(`/asset/default/${this.obj.asset.name}`);
|
|
// t.mapping = gameEngine.$.EquirectangularReflectionMapping;
|
|
// gameEngine.scene.background = t;
|
|
// gameEngine.scene.environment = t;
|
|
// gameEngine.scene.add(gameEngine.camera);
|
|
} else {
|
|
let gltf = await gameEngine.load(this.obj.asset.name);
|
|
//console.debug('GLTF', gltf);
|
|
this.loadedAsset = gltf;
|
|
this.animations = gltf.animations.map(a => ({
|
|
name: a.name, id: a.uuid
|
|
}));
|
|
autoScale(gltf.scene);
|
|
let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
|
|
//console.log(bb)
|
|
gameEngine.camera.position.set(bb.max.x, bb.max.y, bb.max.z);
|
|
gameEngine.orbitControls.target.set((bb.max.x + bb.min.x) / 2, (bb.max.y + bb.min.y) / 2, (bb.max.z + bb.min.z) / 2)
|
|
gameEngine.orbitControls.update();
|
|
gameEngine.activeObjects.add(gltf.scene);
|
|
//gameEngine.scene.add(gameEngine.light);
|
|
}
|
|
}
|
|
},
|
|
|
|
async toggleAnimation(animation){
|
|
animation.playing = !animation.playing;
|
|
gameEngine.playAnimation(
|
|
gameEngine.scene,
|
|
this.loadedAsset.animations.find(a=>a.uuid == animation.id),
|
|
animation.playing
|
|
);
|
|
},
|
|
}
|
|
}
|
|
</script> |