✨ camera rotation first implementation

src/.template/functions.js

@@ -22,6 +22,6 @@ async function goTo(file,rotation="0 0 0")
   base.parentNode.removeChild(base);
   newScene.setAttribute("id","base")
   
-  let camera = document.querySelector("#camera")
+  let camera = document.querySelector("#player")
   camera.setAttribute("rotation",rotation)
 }

src/.template/script.js

@@ -0,0 +1,115 @@
+///////////////
+// FONCTIONS //
+///////////////
+function updateSlider()
+{
+  
+}
+function arrayRemove(arr, value) { 
+    return arr.filter(function (geeks) {
+        return geeks != value;
+    });
+}
+
+async function goTo(file="./base.html"){  
+  newScene = document.createElement("a-entity")
+  newScene.setAttribute("id", "tmp")
+  newScene.setAttribute('material', 'opacity', '0.5');
+  baliseArray = document.querySelector("#base").childNodes
+  baliseArray.forEach(element => {
+  console.log(element.nodeName)
+    if(element.nodeName === "#text" || element.nodeName === "#comment")
+    {
+      console.log("goTo(): no event to emit")
+    }
+    else{
+      element.emit("startanim",null,false)
+    }
+  });
+  // Load NewScene's Content
+  fetch(file)
+    .then(response => response.text())
+    .then(text => {
+      newScene.innerHTML= text;
+      document.querySelector("a-scene").append(newScene)
+    });
+  await new Promise(r => setTimeout(r, 1000));
+  oldScene = document.querySelector("#base")
+  oldScene.parentNode.removeChild(oldScene);
+  newScene.setAttribute("id","base")
+  newScene.childNodes.forEach(element  =>{
+    if(element.nodeName !== "#text")
+    {
+      element.setAttribute("animation","property: opacity; from: 1.0; to: 0.0;startEvents: startanim; dur: 1000")
+    }
+  });
+}
+
+////////////////////////
+// COMPONENTS A-FRAME //
+////////////////////////
+
+AFRAME.registerComponent('animationcustom', {
+    init: async function () {
+    this.el.setAttribute("animation","property: opacity; from: 0.0; to: 1.0; dur: 1000")
+    if(this.el.parentNode.id === "base"){
+      this.el.setAttribute("animation","property: opacity; from: 1.0; to: 0.0;startEvents: startanim; dur: 1000")
+    }
+  },
+});
+
+
+AFRAME.registerComponent('clickcontroller', {
+  init: function () {
+    this.el.addEventListener('triggerdown', this.logThumbstick);
+  },
+  logThumbstick: function (evt) {
+    document.querySelector("a-box").setAttribute("color","red")
+    evt.detail.el.getIntersection.setAttribute("color","purple")
+  }
+})
+
+//
+// AFRAME.registerComponent('cursor-listener', {
+//     init: function () {
+//       this.el.addEventListener('raycaster-intersected', evt => {
+//         this.raycaster = evt.detail.el;
+//       });
+//       this.el.addEventListener('raycaster-intersected-cleared', evt => {
+//         this.raycaster = null;
+//       });
+//     },
+//     tick: function () {
+//         if (!this.raycaster) { return; }  // Not intersecting.
+//         let intersection = this.raycaster.components.raycaster.getIntersection(this.el);
+//         this.raycaster.components.raycaster.far = intersection.distance
+//         if (!intersection) { return; } // Not intersecting
+//         // intersecting
+//         console.log(intersection);
+//     }
+//   });
+
+let arrayViews = []
+AFRAME.registerComponent('sliderelement',{
+  init: function(){
+    let el = this.el
+    arrayViews.push(el)
+    console.log(arrayViews)
+    updateSlider()
+  },
+  remove: function(){
+    let el = this.el
+    arrayViews = arrayRemove(arrayViews,el)
+    console.log(arrayViews)
+  }
+})
+
+AFRAME.registerComponent('map',{
+  remove: function(){
+    document.querySelector("#camera").setAttribute("look-controls","enabled: true; mouseEnabled: true");
+  },
+  init: function(){
+    document.querySelector("#camera").setAttribute("rotation","0 0 0");
+    document.querySelector("#camera").setAttribute("look-controls","enabled: false; mouseEnabled: false");
+  }
+})

src/models/Generator.php

@@ -1,7 +1,7 @@
 <?php
 
 class GeneratorPanorama{
-    public static function generateHtml($panoramaName, $body):string{
+    public static function generateHtml($panoramaName, $body, $firstView):string{
       $page = '
 <!doctype html>
 <html lang="en">
@@ -24,17 +24,12 @@ class GeneratorPanorama{
   <body>
     <a-scene>
 
-      <!-- Caméra Rig -->
-      <a-entity id="player" position="0 0 0">
-        <!-- Caméra -->
-        <a-entity position="0 -1.6 0" cursor="rayOrigin: mouse">
-          <a-camera wasd-controls-enabled="false" look-controls id="camera">
-            <a-cursor id="cursor" color="white" position="0 0 -0.2" scale="0.25 0.25 0.25"
-              animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 0.25 0.25 0.25; dur: 150">
-            </a-cursor>
-          </a-camera>
-        </a-entity>
+    <a-entity id="player" position="0 0 0" rotation="' . strval($firstView->getCameraRotation()) . '">
+      <!-- Caméra -->
+      <a-entity position="0 0 0" id="camera" camera look-controls="enabled: true; mouseEnabled: true" cursor="rayOrigin: mouse">
       </a-entity>
+    </a-entity>
+
 
       <a-entity id="base">
         '.$body.'
@@ -80,13 +75,19 @@ class GeneratorPanorama{
               <a-entity position="'.strval($element->getPosition()).'" rotation="' . strval($element->getRotation()) . '" text="value: '.$element->getContent().'; align: center" animationcustom class="class' . $classNumber . '" ' . $opacity . ' ></a-entity>
             ';
           }else{
+            $cameraRotation = '';
+            if(get_class($element->getView()) == Timeline::class){
+              $cameraRotation = strval($element->getView()->getFirstView()->getCameraRotation());
+            } else {
+              $cameraRotation = strval($element->getView()->getCameraRotation());
+            }
             $path = explode('.', $element->getView()->getPath())[0].'.html';
           
             $body .= '
               <a-entity ' . $opacity . ' position="' . strval($element->getPosition()) . '" rotation="' . strval($element->getRotation()) . '" scale="' . $element->getScale() . ' class="class' . $classNumber . '" >
               <a-entity gltf-model="./assets/models/direction_arrow/scene.gltf" id="model"
                 animation__2="property: position; from: 0 0 0; to: 0 -1 0; dur: 1000; easing: linear; dir: alternate; loop: true" animationcustom
-                onclick="goTo(\'templates/' . $path . '\')"
+                // onclick="goTo(\'templates/' . $path . '\', \'' . $cameraRotation . '\')"
                 look-at="#pointer' . $elementId .'">
               </a-entity>
                 <a-entity id="pointer' . $elementId . '"  animation__2="property: position; from: 3 0 1; to: 3 -1.0 1; dur: 1000; easing: linear; dir: alternate;loop: true">
@@ -109,6 +110,7 @@ class GeneratorPanorama{
       $folders = array('assets', 'assets/images', 'assets/sounds', '/scripts', '/templates', '/assets/models');
       $panoramaId = $panorama->getId();
       $firstViewBody = '';
+      $firstViewObject = null;
 
       $elements = array();
 
@@ -118,6 +120,9 @@ class GeneratorPanorama{
         if($template->name == explode('.', $fisrtView)[0].'.html'){
           $firstViewBody = $template->body;
         }
+        if($view->getPath() == $fisrtView ){
+          $firstViewObject = $view;
+        }
       }
 
       foreach($panorama->getTimelines() as $key => $timeline) {
@@ -126,9 +131,12 @@ class GeneratorPanorama{
         if($template->name == explode('.', $fisrtView)[0].'.html'){
           $firstViewBody = $template->body;
         }
+        if($timeline->getName() == $fisrtView) {
+          $firstViewObject = $timeline->getFirstView();
+        }
       }
 
-      $page = GeneratorPanorama::generateHtml($panorama->getName(), $firstViewBody);
+      $page = GeneratorPanorama::generateHtml($panorama->getName(), $firstViewBody, $firstViewObject);
 
       $images = GeneratorPanorama::getImages($panorama);
 
@@ -247,17 +255,25 @@ class GeneratorPanorama{
             <a-entity position="'.strval($element->getPosition()).'" rotation="' . strval($element->getRotation()) . '" text="value: '.$element->getContent().'; align: center" animationcustom"></a-entity>
           ';
         }else{
+          $cameraRotation = '';
+
           if(method_exists($element->getView(), 'getPath')){
             $path = explode('.', $element->getView()->getPath())[0].'.html';
           } else {
             $path = $element->getView()->getName().'.html';
           }
+
+          if(get_class($element->getView()) == Timeline::class){
+            $cameraRotation = strval($element->getView()->getFirstView()->getCameraRotation());
+          } else {
+            $cameraRotation = strval($element->getView()->getCameraRotation());
+          }
         
           $body .= '
             <a-entity position="' . strval($element->getPosition()) . '" rotation="' . strval($element->getRotation()) . '" scale="' . $element->getScale() . '">
             <a-entity gltf-model="./assets/models/direction_arrow/scene.gltf" id="model"
               animation__2="property: position; from: 0 0 0; to: 0 -1 0; dur: 1000; easing: linear; dir: alternate; loop: true" animationcustom
-              onclick="goTo(\'templates/' . $path . '\')"
+              onclick="goTo(\'templates/' . $path . '\', \'' . $cameraRotation . '\')"
               look-at="#pointer' . $elementId .'">
             </a-entity>
               <a-entity id="pointer' . $elementId . '"  animation__2="property: position; from: 3 0 1; to: 3 -1.0 1; dur: 1000; easing: linear; dir: alternate;loop: true">