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

added more properties with appropriate watcher/binder

This commit is contained in:
dataexcess 2022-12-08 22:12:51 +01:00
parent c75964d599
commit b3a1977875
2 changed files with 18 additions and 13 deletions

View File

@ -1,7 +1,6 @@
import { Audio as StaticAudio, PositionalAudio, AudioLoader } from 'three' import { Audio as StaticAudio, PositionalAudio, AudioLoader } from 'three'
import { defineComponent } from 'vue' import { defineComponent, watch } from 'vue'
import Object3D from '../core/Object3D' import Object3D from '../core/Object3D'
import { bindProp } from '../tools'
type ConcreteAudio = StaticAudio | PositionalAudio type ConcreteAudio = StaticAudio | PositionalAudio
@ -14,7 +13,7 @@ export default defineComponent({
extends: Object3D, extends: Object3D,
name: 'Audio', name: 'Audio',
props: { props: {
src: String, src: { type: String, required: false },
volume: { type: Number, default: 1.0 }, volume: { type: Number, default: 1.0 },
isStreamed: { type: Boolean, default: true } isStreamed: { type: Boolean, default: true }
}, },
@ -22,18 +21,21 @@ export default defineComponent({
let streamedAudio = new Audio(); let streamedAudio = new Audio();
return { streamedAudio } return { streamedAudio }
}, },
watch: {
volume: function(value) {
this.audio?.setVolume(value)
},
src: function(value) {
this.stop()
this.loadAudioAndPlay()
}
},
methods: { methods: {
initAudio(audio: ConcreteAudio) { initAudio(audio: ConcreteAudio) {
this.audio = audio this.audio = audio
this.initObject3D(this.audio) this.initObject3D(this.audio)
this.bindProps()
this.loadAudioAndPlay() this.loadAudioAndPlay()
}, },
bindProps() {
['volume', 'isStreamed'].forEach(p => {
bindProp(this, p, this.audio)
})
},
loadAudioAndPlay() { loadAudioAndPlay() {
if (!this.src) return undefined if (!this.src) return undefined

View File

@ -8,7 +8,9 @@ export default defineComponent({
name: 'PositionalAudio', name: 'PositionalAudio',
props: { props: {
refDistance: { type: Number, default: 1.0 }, refDistance: { type: Number, default: 1.0 },
rolloffFactor: { type: Number, default: 1.0 } maxDistance: { type: Number, default: 1.0 },
rolloffFactor: { type: Number, default: 1.0 },
distanceModel: { type: String, default: 'inverse' },
}, },
created() { created() {
@ -27,9 +29,10 @@ export default defineComponent({
this.bindProps() this.bindProps()
}, },
methods: { methods: {
bindProps(audio: PositionalAudio) { bindProps() {
['refDistance', 'rolloffFactor'].forEach(p => { ['refDistance', 'maxDistance', 'rolloffFactor', 'distanceModel'].forEach(p => {
bindProp(this.$props, p, this.audio) console.log('initialised positionalAudio props')
bindProp(this.$props, p, (this.audio as PositionalAudio).panner)
}) })
}, },
}, },