1
0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00

simple xr support

This commit is contained in:
Kevin Levron 2021-04-03 23:57:46 +02:00
parent c900286de8
commit 8eff7c1728

View File

@ -1,4 +1,5 @@
import { defineComponent, h } from 'vue'; import { defineComponent, h } from 'vue';
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
import useThree from './useThree'; import useThree from './useThree';
export default defineComponent({ export default defineComponent({
@ -13,6 +14,7 @@ export default defineComponent({
shadow: Boolean, shadow: Boolean,
width: String, width: String,
height: String, height: String,
xr: Boolean,
}, },
setup() { setup() {
return { return {
@ -44,8 +46,16 @@ export default defineComponent({
if (this.three.init(params)) { if (this.three.init(params)) {
this.renderer = this.three.renderer; this.renderer = this.three.renderer;
this.renderer.shadowMap.enabled = this.shadow; this.renderer.shadowMap.enabled = this.shadow;
if (this.three.composer) this.animateC();
else this.animate(); if (this.xr) {
this.renderer.domElement.parentNode.appendChild(VRButton.createButton(this.renderer));
this.renderer.xr.enabled = true;
if (this.three.composer) this.renderer.setAnimationLoop(this.animateXRC);
else this.renderer.setAnimationLoop(this.animateXR);
} else {
if (this.three.composer) this.animateC();
else this.animate();
}
}; };
this.onMountedCallbacks.forEach(c => c()); this.onMountedCallbacks.forEach(c => c());
@ -72,6 +82,8 @@ export default defineComponent({
if (this.raf) requestAnimationFrame(this.animateC); if (this.raf) requestAnimationFrame(this.animateC);
this.three.renderC(); this.three.renderC();
}, },
animateXR() { this.three.render(); },
animateXRC() { this.three.renderC(); },
}, },
render() { render() {
return h('canvas', {}, this.$slots.default()); return h('canvas', {}, this.$slots.default());