diff --git a/app/pages/PageEnigma/js/animated_item.js b/app/pages/PageEnigma/js/animated_item.js deleted file mode 100644 index 10b500cb08..0000000000 --- a/app/pages/PageEnigma/js/animated_item.js +++ /dev/null @@ -1,155 +0,0 @@ -import * as THREE from 'three'; -import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; -import { LipSync } from './lipsync.js'; - -class AnimatedItem { - constructor(uuid) { - this.name = uuid; - this.anims = []; - this.audiodrive = null; - this.lipsync_comp = null; - this.face = null; - this.mixer = null; - this.child = null; - - this.auto_blink = true; - this.currentAction; - - this.blink_timer = 0.0; - this.blink_every = 3.0; - this.blink_position = 0.0; - this.blink_speed = 8.0; - this.blinking = false; - this.st_blinking = false; - this.blink_vrm = null; - } - - load(filepath, callback) { - this.load_glb(filepath, callback); - } - - blink(delta) { - if (this.blink_vrm == null) { - return; - } - - this.blink_timer += delta; - if (this.blink_timer >= this.blink_every) { - this.blinking = true; - } - - if (this.blinking) { - if (this.blink_position < 1 && this.st_blinking == false) { - this.blink_position += delta * this.blink_speed; - } else if (this.blink_position > 0) { - this.blink_position -= delta * this.blink_speed; - this.st_blinking = true; - } else { - this.blink_position = 0.0; - this.blink_timer = 0.0; - this.blinking = false; - this.st_blinking = false; - } - } - - if (this.blink_position > 1.1) { - this.blink_position = 1.0; - } - if (this.blink_position < -0.1) { - this.blink_position = 0.0; - } - - this.face.morphTargetInfluences[this.blink_vrm] = this.blink_position; - } - - update(delta) { - if (this.face != null && this.auto_blink) { - this.blink(delta); - if (this.mixer != null) { - this.mixer.update(delta); // add speed here later. - } - } - } - - // 3js clip - animate(clip) { - this.currentAction = this.mixer.clipAction(clip); - this.currentAction.play(); - } - - // talking and plays the audio - // takes audio clip from folder on the server .wav - sync_lips(filepath) { - if(this.lipsync_comp != null){ - return fetch(filepath) - .then((response) => { - if (!response.ok) { - throw new Error(`HTTP error, status = ${response.status}`); - } - return response.arrayBuffer(); - }).then((arrayBuffer) => { - this.lipsync_comp.startFromAudioFile(arrayBuffer); - }); - } - } - - // Takes a glb animation loads from the server - load_animation(filepath, callback = null) { - let glbLoader = new GLTFLoader(); - glbLoader.load(filepath, - (object) => { - let anim = object.animations[0]; - anim.name = this.name+'::'+anim.name; - let animationAction = this.mixer.clipAction(anim); - this.anims.push(animationAction); - if (callback != null) { - callback(this.name); - } - this.child.animations.push(anim); - } - ); - } - - // loads the mesh of the character - load_glb(filepath, callback = null) { - let glbLoader = new GLTFLoader(); - glbLoader.load(filepath, (glb) => { - glb.scene.children.forEach(child => { - child.traverse(c => { - if (c.isMesh) { - c.material.metalness = 0.0; - c.material.specular = 0.0; - c.castShadow = true; - c.receiveShadow = true; - c.frustrumCulled = false; - c.material.transparent = false; - if (c.morphTargetInfluences && c.morphTargetDictionary) { - const blendShapeIndexI = c.morphTargetDictionary["E"]; - if (blendShapeIndexI != null && this.face == null) { - this.face = c; - this.lipsync_comp = new LipSync(this.face); - } - } - } - }); - child.frustrumCulled = false; - child.userData.name = "CHAR::"+child.name; // Will be used for loading the character later. - if(this.mixer == null) { - this.mixer = new THREE.AnimationMixer(child); - } - if(this.face == null) { - this.face = child; - } - this.child = child; - }); - this.name = this.child.uuid; - if (callback != null) { - callback(this.name, glb.scene.children, this); - } - }, - (xhr) => { - }); - } -} - -export default AnimatedItem; diff --git a/app/pages/PageEnigma/js/components.js b/app/pages/PageEnigma/js/components.js deleted file mode 100644 index 2bd7eff2ff..0000000000 --- a/app/pages/PageEnigma/js/components.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as THREE from 'three'; - -class TransformObject { - constructor(uuid) { - this.name = "Transform"; - this.uuid = uuid; - this.position = new THREE.Vector3(0, 0, 0); - this.rotation = new THREE.Vector3(0, 0, 0); - this.scale = new THREE.Vector3(1, 1, 1); - } - - get_json() { - return { "name": this.name, "object": this.object, "position": this.position, "rotation": this.rotation, "scale": this.scale } - } - - get_html() { - return `
- `+ this.name + ` -
- Demo Position: `+ this.position.toArray() + `
- Demo Rotation: `+ this.rotation.toArray() + `
- Demo Scale: `+ this.scale.toArray() + ` -
`; - } -} - -class Animation { - constructor(clip) { - this.name = "Animation"; - this.clip = clip; - } -} - -class Audio { - constructor(audio_file) { - this.name = "Audio Player"; - this.audio_file = audio_file; - } -} - -export default TransformObject; diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js index 7edf5e7b8a..ff4f7efd70 100644 --- a/app/pages/PageEnigma/js/editor.js +++ b/app/pages/PageEnigma/js/editor.js @@ -1,8 +1,7 @@ import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { TransformControls } from 'three/addons/controls/TransformControls.js'; -import Scene from './scene.js'; -import SaveManager from './serialization.js'; +import Scene from './scene.ts'; import APIManager from './api_manager.ts'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; @@ -95,8 +94,6 @@ class Editor { this.playback = false; this.playback_location = 0; this.max_length = 10; - // Save & Load. - this.save_manager = new SaveManager(this.version); // Audio Engine Test. this.audio_engine = new AudioEngine(); @@ -311,7 +308,7 @@ class Editor { let delta_time = this.clock.getDelta() // All calls that are not super important like timeline go here. - this.activeScene.update(delta_time); + //this.activeScene.update(delta_time); //this.orbit.update(0.1); //console.log(this.transform_engine.clips[this.test_box_uuid]); diff --git a/app/pages/PageEnigma/js/playable_clip.js b/app/pages/PageEnigma/js/playable_clip.js deleted file mode 100644 index 9ec5f1551b..0000000000 --- a/app/pages/PageEnigma/js/playable_clip.js +++ /dev/null @@ -1,102 +0,0 @@ -class PlayableClip { - constructor(name) { - this.name = name; - this.isPlaying = false; - } - - play() { - this.isPlaying = true; - console.log(`${this.name} is now playing.`); - // Implementation of the play functionality - } - - pause() { - this.isPlaying = false; - console.log(`${this.name} is paused.`); - // Implementation of the pause functionality - } - - stop() { - this.isPlaying = false; - console.log(`${this.name} has stopped.`); - // Implementation of the stop functionality - } -} - -class AudioClip extends PlayableClip { - constructor(name, duration, format,location) { - super(name); - this.duration = duration; // in seconds - this.format = format; // e.g., 'mp3', 'wav' - this.location = location; // url path - } - - play() { - super.play(); - // Additional implementation specific to AudioClip - console.log(`Streaming audio for ${this.name}.`); - } - - pause() { - super.pause(); - // Additional implementation specific to AudioClip - console.log(`Audio stream paused for ${this.name}.`); - } - - stop() { - super.stop(); - // Additional implementation specific to AudioClip - console.log(`Audio stream stopped for ${this.name}.`); - } -} - -class AnimationClip extends PlayableClip { - constructor(name, frames, fps) { - super(name); - this.frames = frames; // Total number of frames - this.fps = fps; // Frames per second - } - - play() { - super.play(); - // Additional implementation specific to AnimationClip - console.log(`Animation started for ${this.name}.`); - } - - pause() { - super.pause(); - // Additional implementation specific to AnimationClip - console.log(`Animation paused for ${this.name}.`); - } - - stop() { - super.stop(); - // Additional implementation specific to AnimationClip - console.log(`Animation stopped for ${this.name}.`); - } -} - -class GameObjectClip extends PlayableClip { - constructor(name, positions) { - super(name); - this.positions = positions; // Array of position objects { x, y, z } - } - - play() { - super.play(); - // Additional implementation specific to GameObjectClip - console.log(`GameObject movement started for ${this.name}.`); - } - - pause() { - super.pause(); - // Additional implementation specific to GameObjectClip - console.log(`GameObject movement paused for ${this.name}.`); - } - - stop() { - super.stop(); - // Additional implementation specific to GameObjectClip - console.log(`GameObject movement stopped for ${this.name}.`); - } -} diff --git a/app/pages/PageEnigma/js/scene.js b/app/pages/PageEnigma/js/scene.ts similarity index 83% rename from app/pages/PageEnigma/js/scene.js rename to app/pages/PageEnigma/js/scene.ts index ea0d379ae2..125a2663d4 100644 --- a/app/pages/PageEnigma/js/scene.js +++ b/app/pages/PageEnigma/js/scene.ts @@ -2,11 +2,14 @@ import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; class Scene { - constructor(name) { + name: string; + gridHelper: THREE.GridHelper | undefined; + scene: THREE.Scene; + + constructor(name: string) { this.name = name; - this.gridHelper = null; + this.gridHelper; this.scene = new THREE.Scene(); - this.activeItem = null; } initialize() { @@ -15,7 +18,7 @@ class Scene { this._create_skybox(); } - instantiate(name) { + instantiate(name: string) { let material = new THREE.MeshPhongMaterial({ color: 0xffffff }); let geometry; if (name == "Box") { @@ -43,19 +46,16 @@ class Scene { return obj.uuid; } - get_object_by_uuid(uuid) { + get_object_by_uuid(uuid: string) { return this.scene.getObjectByProperty('uuid', uuid); } - update(delta) { - - } - _disable_skybox() { this.scene.background = null; } - render_mode(enabled=true) { + render_mode(enabled:boolean=true) { + if(this.gridHelper == undefined) { return; } if(enabled) { this._disable_skybox(); this.scene.remove(this.gridHelper); @@ -65,24 +65,13 @@ class Scene { } } - accept_animation_clip(clip) { - this.animations.push(clip) - } - - play_anim_demo(character_uuid) { - this.animated_items[character_uuid].animate(this.animated_items[character_uuid].anims[0]._clip); - this.animated_items[character_uuid].sync_lips("/resources/sound/2pac.wav"); - this.activeItem = character_uuid; - this.accept_animation_clip(this.animated_items[character_uuid].anims[0]._clip); - } - - async load_glb(filepath) { //: Promise { + async load_glb(filepath: string) { //: Promise { return new Promise((resolve) => { let glbLoader = new GLTFLoader(); glbLoader.load(filepath, (glb) => { glb.scene.children.forEach(child => { - child.traverse(c => { - if (c.isMesh) { + child.traverse((c: THREE.Object3D) => { + if (c instanceof THREE.Mesh) { c.material.metalness = 0.0; c.material.specular = 0.5; c.castShadow = true; diff --git a/app/pages/PageEnigma/js/serialization.js b/app/pages/PageEnigma/js/serialization.js deleted file mode 100644 index 1f6823e334..0000000000 --- a/app/pages/PageEnigma/js/serialization.js +++ /dev/null @@ -1,97 +0,0 @@ -import * as THREE from 'three'; -import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js'; -import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; - -class SaveManager { - constructor(version) { - this.version = version; - this.scene = null; - } - - save(scene, scene_callback, audio_manager, timeline, animations) { - let gltfExporter = new GLTFExporter(); - gltfExporter.parse( - scene, - function (gltf) { - let save_json = {"glb": gltf, "audio": audio_manager.clips, "timeline": timeline} - - // TODO: give the file name via a modal. - const file = new File([JSON.stringify(gltf)], "test.glb", {type: 'application/json'}); - - let blobUrl = URL.createObjectURL(file); - scene_callback(file); - - let a = document.createElement('a'); - - const now = new Date(); - const year = now.getFullYear(); - const month = String(now.getMonth() + 1).padStart(2, '0'); - const day = String(now.getDate()).padStart(2, '0'); - const hours = String(now.getHours()).padStart(2, '0'); - const minutes = String(now.getMinutes()).padStart(2, '0'); - const seconds = String(now.getSeconds()).padStart(2, '0'); - const randomNumber = Math.floor(Math.random() * 1000); - let save_name = `save_${randomNumber}_${year}${month}${day}_${hours}${minutes}${seconds}.sav`; - - a.href = blobUrl; - a.download = save_name; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - URL.revokeObjectURL(blobUrl); - }, - { - trs: false, - onlyVisible: false, - animations: animations, - binary: true - } - - ); - } - - load(file, load_callback) { - let reader = new FileReader(); - - reader.onload = function (event) { - let data = JSON.parse(event.target.result); - let glb = data.glb; - let audio = data.audio; - let timelineData = data.timeline; - let animationData = data.animations; - - let loader = new GLTFLoader(); - - loader.parse(glb, '', function (gltf) { - let scene = gltf.scene; - let clips = audio; - let timeline = timelineData; - let animations = animationData; - load_callback(scene, clips, timeline, animations); - }); - }; - - reader.readAsText(file); - } - - download(data, filename, type) { - var file = new Blob([data], { type: type }); - if (window.navigator.msSaveOrOpenBlob) // IE10+ - window.navigator.msSaveOrOpenBlob(file, filename); - else { // Others - var a = document.createElement("a"), - url = URL.createObjectURL(file); - a.href = url; - a.download = filename; - document.body.appendChild(a); - a.click(); - setTimeout(function () { - document.body.removeChild(a); - window.URL.revokeObjectURL(url); - }, 0); - } - } - -} - -export default SaveManager; diff --git a/app/pages/PageEnigma/js/track.js b/app/pages/PageEnigma/js/track.js deleted file mode 100644 index e69de29bb2..0000000000