0
Ich verwende derzeit einen Rahmen, um Szenen innerhalb einer einzelnen HTML-Datei zu ändern. ZB habe ich eine Lobby, dann kann ich zu Szene 2 navigieren, innerhalb von Szene 2 kann ich zurück in die Lobby gehen, indem ich den Zurück zur Lobby-Taste aktiviere. Dies wird mich zurück in die Lobby-Szene bringen, aber die Kameraposition ist von der vorherigen Zurück-Lobby-Schaltfläche weg. Gibt es eine Möglichkeit, dass meine Kamera bei der Rückkehr in die Lobby-Szene zu der Standardansicht zurückkehren kann, die ich möchte?Zurücksetzen der Kamera-Standardposition beim Zurückkehren der Szene
<!DOCTYPE>
<html class="a-html">
<head>
<title>new change</title>
<meta aframe-injected="" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no,user-scalable=no,minimal-ui"><meta aframe-injected="" name="mobile-web-app-capable" content="yes"><meta aframe-injected="" name="theme-color" content="black">
<script src="//cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.js"></script>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]^4.0.0/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene class="fullscreen" canvas="" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" auto-enter-vr="">
<a-entity camera="" position="0 0 5" look-controls="" wasd-controls="" rotation="" scale="" visible="">
<a-entity cursor="fuse: true; fuseTimeout: 1000" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" rotation="" scale="" visible="" raycaster="">
<a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>
</a-entity> <!--End of Camera entity -->
<a-entity id="scene1">
<a-text value="Lobby" position="-1.5 5 -3" scale="2 2" color="black"></a-text>
<a-sky color="skyblue" position="0 0 0" rotation="" scale="" visible="" material="" geometry=""></a-sky>
<a-box color="tomato" onclick="setScene2()" position="0 1 -3" depth="2" height="4" width="0.5"><a-text value="hello world"></a-text></a-box> <!--box1 -->
<a-box color="tomato" onclick="setScene3()" position="2 1 -3" depth="2" height="4" wlocalidth="0.5"></a-box> <!--box2 -->
<a-box color="tomato" onclick="setScene4()" position="4 1 -3" depth="2" height="4" width="0.5"></a-box> <!--box3 -->
</a-entity> <!--End of scene1 entity -->
<a-entity id="scene2" visible="false">
<a-sky color="yellow" position="0 0 0" rotation="" scale="" visible="" material="" geometry=""></a-sky>
<a-box color="pink" onclick="setScene1()" position="-3 1 -3" rotation="0 90 0 " depth="2" height="4" width="0.5">
<a-text value="Return to Lobby" position="-1 0 -0.5" color="black" rotation="0 -90 0" ></a-text>
</a-box> <!-- End of scene2, calling returning to scene1-->
<a-box scale="1 1 1" color="skyblue" position="3 0 -5" rotation="45 45 45">
<a-animation attribute="position" to="3 0.5 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
<a-animation attribute="scale" begin="mouseenter" dur="200" to="2.3 2.3 2.3"></a-animation>
<a-animation attribute="scale" begin="mouseleave" dur="200" to="2 2 2"></a-animation>
<a-animation attribute="rotation" begin="click" dur="2000" to=" 360 405 45" ></a-animation>
</a-box>
<a-plane color="#CCC" height="2" width="2"></a-plane>
<a-circle color="black" radius="0.75" depth="0.5" position="0 -3 2" rotation="-90 0 0"></a-circle>
<a-text value="Welcome to Scene 2" position="-1.5 5 -3" scale="2 2" color="black"></a-text>
</a-entity> <!--End of scene2 entity -->
<a-entity id="scene3" visible ="false">
<a-sky color="limegreen" position="0 0 0" rotation="" scale="" visible="" material="" geometry=""></a-sky>
<a-box color="blue" onclick="setScene1()" position="-3 1 -3" rotation="0 90 0 " depth="2" height="4" width="0.5">
<a-text value="Return to Lobby" position="-1 0 -0.5" color="black" rotation="0 -90 0" ></a-text>
</a-box> <!-- End of scene2, calling returning to scene1-->
<a-plane color="#CCC" height="2" width="2"></a-plane>
<a-box scale="1 1 1" color="skyblue" position="3 0 -5" rotation="45 45 45">
<a-animation attribute="position" to="3 10.5 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
<a-animation attribute="scale" begin="mouseenter" dur="200" to="2.3 2.3 2.3"></a-animation>
<a-animation attribute="scale" begin="mouseleave" dur="200" to="2 2 2"></a-animation>
<a-animation attribute="rotation" begin="click" dur="2000" to=" 360 405 45" ></a-animation>
</a-box>
<a-text value="Welcome to Scene 3" position="-1.5 5 -3" scale="2 2" color="black"></a-text>
</a-entity>
</a-scene>
<script type="text/javascript">
function setScene2() {
// console.log('kkk')
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('scene2').setAttribute('visible', 'true')
// document.querySelector('#ambient2').emit('aaa');
// document.querySelector('#fading-cube').emit('fade');
}
function setScene1() {
// console.log('kkk')
document.getElementById('scene2').setAttribute('visible', 'false')
document.getElementById('scene1').setAttribute('visible', 'true')
document.getElementById('scene3').setAttribute('visible', 'false')
// document.querySelector('#ambient1').emit('aaa');
// document.querySelector('#fading-cube').emit('fade');
}
function setScene3(){
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('scene3').setAttribute('visible', 'true')
}
</script>
</body>
</html>
Hallo, danke für die Antwort, ist es möglich, mir ein Beispiel zu zeigen, wie es gemacht wird? Ich wollte die allgemeine Klassenmethode verwenden, aber nicht sicher, wie es geht. Also habe ich versucht, die Kamera-Entity in Szene 2 und Szene 3 zu platzieren, aber es funktioniert nicht. Ich konnte es immer noch nicht an der Startposition der Standardkamera reparieren, wenn ich zurück in die Lobby-Szene ging. –
@KeithOng Entschuldigung, ich habe gerade gesehen, dass Sie eigentlich keine verschiedenen Szenen haben, sondern verschiedene Entitäten, die die Sichtbarkeit wechseln. Ich habe meine anwser + Geige aktualisiert. –