220 lines
8.3 KiB
JavaScript
220 lines
8.3 KiB
JavaScript
import { InteractiveObject } from '@/components/InteractiveObjects/InteractiveObject';
|
|
import { GameEngine } from '@/lib/GameEngine';
|
|
import { Hero } from '@/lib/Hero';
|
|
let gameEngine = null;
|
|
|
|
export default {
|
|
|
|
async mounted(){
|
|
gameEngine = new GameEngine();
|
|
//this.gameEngine = gameEngine;
|
|
await gameEngine.init(this.$refs.target, {
|
|
xr: true,
|
|
gizmo: this.env == 'GameDesigner',
|
|
designMode: this.env == 'GameDesigner',
|
|
depthSense: this.env == 'GameDesigner' ? false : this.store.prefs.xr.depthSense
|
|
});
|
|
//gameEngine.scene.add(new gameEngine.$.GridHelper(100,100));
|
|
if (this.env == 'GameDesigner'){
|
|
gameEngine.scene.add(gameEngine.transformControls.getHelper());
|
|
}else{
|
|
gameEngine.dashboard.enable();
|
|
}
|
|
this.resize();
|
|
//gameEngine.setCamera(gameEngine.orthographicCamera)
|
|
//gameEngine.setCameraOrthographic();
|
|
await this.loadScenario();
|
|
window.addEventListener('resize', this.resize);
|
|
},
|
|
|
|
unmounted(){
|
|
window.removeEventListener('resize', this.resize);
|
|
gameEngine.stop();
|
|
},
|
|
|
|
computed:{
|
|
scenes(){
|
|
return this.scenario?.scenes || [];
|
|
},
|
|
scene(){
|
|
return this.scenesList[0];
|
|
},
|
|
currentObject(){
|
|
return this.objectsList[0];
|
|
},
|
|
sceneObjects(){
|
|
return this.object.scenes?.[this.scene?.data?.id]?.objects;
|
|
},
|
|
object(){
|
|
return this.modelValue;
|
|
},
|
|
objectAnimations(){
|
|
return this.currentObject?.__g?.animations?.map(a => ({
|
|
name: a.name, id: a.uuid, a
|
|
}));
|
|
}
|
|
},
|
|
|
|
watch:{
|
|
async scene(n){
|
|
this.object.scenes = this.object.scenes || {}
|
|
this.object.scenes[n.data.id] = this.object.scenes[n.data.id] || {}
|
|
await this.loadEnvironment(n, this.object.scenes[n.data.id]);
|
|
},
|
|
mode(n){
|
|
gameEngine.transformControls.setMode(n)
|
|
},
|
|
async 'object.scenario'(n){
|
|
await this.loadScenario()
|
|
},
|
|
currentObject(n){
|
|
if (this.env == 'GameDesigner'){
|
|
gameEngine.transformControls.attach(n.__o);
|
|
gameEngine.gizmo.target = n.__o.position;
|
|
gameEngine.camera.updateProjectionMatrix()
|
|
}
|
|
},
|
|
renderType(v){
|
|
gameEngine.renderType = v;
|
|
},
|
|
cameraType(v){
|
|
if (v == 'perspective'){
|
|
gameEngine.setCameraPerspective();
|
|
}else{
|
|
gameEngine.setCameraOrthographic();
|
|
}
|
|
}
|
|
},
|
|
|
|
methods:{
|
|
async loadScenario(){
|
|
if (this.object.scenario){
|
|
this.scenario = (await this.$api.scenario.load(this.object.scenario)).data;
|
|
}else{
|
|
this.scenario = null;
|
|
}
|
|
},
|
|
|
|
async expandScenarioData(scene){
|
|
const promises = [];
|
|
['environment', 'scene'].filter(e=>scene.data[e]).forEach(e=>{
|
|
promises.push(this.$api.gameObject.load(scene.data[e]).then(r=>scene.data['$'+e] = r.data))
|
|
})
|
|
|
|
for (let i of scene.data.items || []) {
|
|
if (i.data.io){
|
|
if (i.data.io.go){
|
|
promises.push(this.$api.gameObject.load(i.data.io.go).then(r=>i.data.io.$go = r.data));
|
|
}
|
|
}else{
|
|
promises.push(this.$api.gameObject.load(i.data.go).then(r=>i.data.$go = r.data));
|
|
}
|
|
}
|
|
await Promise.all(promises);
|
|
},
|
|
|
|
/**
|
|
* loads all environment objects
|
|
* @param scene Scene object from the Scenario Module
|
|
* @param target Target scene definition from Game Module
|
|
*/
|
|
async loadEnvironment(scene, target){
|
|
//await gameEngine.loadPanorama(`/asset/default/43.webp`);
|
|
gameEngine.activeObjects.clear();
|
|
await this.expandScenarioData(scene);
|
|
target.objects = target.objects || {};
|
|
let l = target.objects;
|
|
if (this.scene.data.$environment){
|
|
await gameEngine.loadPanorama(`/asset/default/${this.scene.data.$environment.asset.name}`);
|
|
}
|
|
if (this.scene.data.$scene){
|
|
let env = await gameEngine.load(`/asset/default/${this.scene.data.$scene.asset.name}`);
|
|
this.setObjectAttributes(l, this.scene.data, env, 100);
|
|
gameEngine.activeObjects.add(env.scene);
|
|
}
|
|
for (let i of this.scene.data.items || []) {
|
|
let io = new InteractiveObject(i.data, gameEngine)
|
|
await io.ready;
|
|
|
|
//let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
|
|
let objKey = (i.data.type == 'GenericObject' || !i.data.type) ? 'scene' : 'object'
|
|
console.log(i.data, io.object)
|
|
this.setObjectAttributes(l, i.data, io.object, 1, objKey);
|
|
gameEngine.activeObjects.add(io.object[objKey]);
|
|
if (this.env == 'GamePlaying'){
|
|
if (i.data.$go.type == 'player3d'){
|
|
let hero = new Hero(io.object, i.data.$go);
|
|
hero.init(gameEngine);
|
|
}else{
|
|
if (io.object.animations?.length){
|
|
gameEngine.playAnimation(gameEngine.scene, io.object.animations[0]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// let camera = new gameEngine.$.PerspectiveCamera();
|
|
// let cameraHelper = new gameEngine.$.CameraHelper(camera);
|
|
// gameEngine.activeObjects.add(cameraHelper);
|
|
// gameEngine.activeObjects.add(camera);
|
|
// this.setObjectAttributes(l, { id: 'camera', 'title': 'Main camera' }, { scene: camera })
|
|
// cameraHelper.update();
|
|
|
|
//this is needed cause when mounted canvas has different size
|
|
this.resize();
|
|
},
|
|
|
|
targetPointerDown(){
|
|
this.pointerDownTime = performance.now();
|
|
},
|
|
targetClick(e){
|
|
if (this.env == 'GameDesigner'){
|
|
if (performance.now() - this.pointerDownTime < 200){
|
|
let intersects = gameEngine.intersect(e, this.$refs.target, gameEngine.activeObjects.children, true);
|
|
//console.log(intersects)
|
|
if (intersects.length){
|
|
//console.log('attaching controls to', intersects[0].object)
|
|
//gameEngine.transformControls.attach(intersects[0].object);
|
|
//console.log(this.sceneObjects[intersects[0].object.__pn_id])
|
|
this.objectsList[0] = this.sceneObjects[intersects[0].object.__pn_id]
|
|
}else{
|
|
gameEngine.transformControls.detach();
|
|
}
|
|
}
|
|
}else{
|
|
gameEngine.onClick(e, this.$refs.target);
|
|
}
|
|
},
|
|
|
|
setObjectAttributes(l, data, o, autoScaleFactor = 1, objectKey = 'scene'){
|
|
if (l[data.id]){
|
|
['position', 'scale', 'rotation'].forEach(p=>{
|
|
o[objectKey][p].copy(l[data.id][p])
|
|
})
|
|
}else{
|
|
gameEngine.autoScale(o[objectKey], autoScaleFactor);
|
|
}
|
|
l[data.id] = l[data.id] || {};
|
|
['position', 'scale', 'rotation', 'visible'].forEach(p=>{
|
|
l[data.id][p] = o[objectKey][p];
|
|
})
|
|
l[data.id].__o = o[objectKey];
|
|
l[data.id].__g = o;
|
|
l[data.id].__title = data.title;
|
|
o[objectKey].__pn_id = data.id;
|
|
},
|
|
|
|
async toggleAnimation(animation){
|
|
animation.playing = !animation.playing;
|
|
gameEngine.playAnimation(gameEngine.scene, animation.a, animation.playing);
|
|
},
|
|
resize(){
|
|
let r = this.$refs.target;
|
|
gameEngine.resize(r.clientWidth, r.clientHeight);
|
|
//this.zoom = Math.min(r.clientWidth / this.viewBox.w, r.clientHeight / this.viewBox.h);
|
|
},
|
|
|
|
control(){
|
|
gameEngine.hero.lockControls();
|
|
}
|
|
}
|
|
} |