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:
parent
c75964d599
commit
b3a1977875
@ -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
|
||||||
|
|
||||||
|
@ -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)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user