Skip to content

Commit 166d286

Browse files
lslzl3000lslzl3000
committed
feat(audio): move audio to @orillusion/media-extension
add audio samples
1 parent e59bd9f commit 166d286

File tree

8 files changed

+260
-28
lines changed

8 files changed

+260
-28
lines changed

‎src/components/audio/AudioListener.ts renamed to ‎packages/media-extention/AudioListener.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ComponentBase } from '../ComponentBase';
1+
import { ComponentBase } from '@orillusion/core';
22

33
/**
44
* Audio Listener
@@ -14,9 +14,6 @@ export class AudioListener extends ComponentBase {
1414
this.context = new AudioContext();
1515
this.gain = this.context.createGain();
1616
this.gain.connect(this.context.destination);
17-
}
18-
public start() {
19-
2017
}
2118
public onUpdate() {
2219
if (!this.context) {
@@ -45,7 +42,6 @@ export class AudioListener extends ComponentBase {
4542
listener.setOrientation(_orientation.x, _orientation.y, _orientation.z, up.x, up.y, up.z);
4643
}
4744
}
48-
4945
destroy() {
5046
this.gain.disconnect();
5147
this.context.close();

‎src/components/audio/PositionAudio.ts renamed to ‎packages/media-extention/PositionAudio.ts

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import { Object3D } from '../../core/entities/Object3D';
2-
import { UnLitMaterial } from '../../materials/UnLitMaterial';
3-
import { Color } from '../../math/Color';
4-
import { Vector3 } from '../../math/Vector3';
5-
import { BoxGeometry } from '../../shape/BoxGeometry';
6-
import { MeshRenderer } from '../renderer/MeshRenderer';
1+
import { BoxGeometry, Color, MeshRenderer, Object3D, UnLitMaterial, Vector3 } from '@orillusion/core';
72
import { AudioListener } from './AudioListener';
83
import { StaticAudio } from './StaticAudio';
94
/**
@@ -20,8 +15,8 @@ export class PositionAudio extends StaticAudio {
2015
constructor() {
2116
super();
2217
}
23-
public setLister(listener: AudioListener): this {
24-
super.setLister(listener);
18+
public setLisenter(listener: AudioListener): this {
19+
super.setLisenter(listener);
2520
this.panner = this.context?.createPanner() as PannerNode;
2621
this.panner.panningModel = 'HRTF';
2722
this.panner.connect(this.gainNode as GainNode);
@@ -41,7 +36,6 @@ export class PositionAudio extends StaticAudio {
4136
let refLength = this.panner.refDistance;
4237
let maxLength = this.panner.maxDistance;
4338
let box = new BoxGeometry(1, 1, 1);
44-
4539
let m1 = new UnLitMaterial();
4640
m1.baseColor = new Color(1, 0, 0);
4741
let m2 = new UnLitMaterial();
@@ -50,6 +44,7 @@ export class PositionAudio extends StaticAudio {
5044
m3.baseColor = new Color(0, 1, 0);
5145
let m4 = new UnLitMaterial();
5246
m4.baseColor = new Color(1, 1, 0);
47+
5348
for (let i = 0; i < this._step; i++) {
5449
let group = new Object3D();
5550
let angle = (i * outerAngle) / (this._step - 1);
@@ -83,10 +78,10 @@ export class PositionAudio extends StaticAudio {
8378
}
8479
public hideHelper() {
8580
this._helper = false;
86-
for (let l of this._lines) {
87-
l.removeAllChild();
88-
l.removeFromParent();
89-
l.destroy();
81+
for(let g of this._lines){
82+
while(g.entityChildren.length > 0)
83+
g.entityChildren[0].destroy()
84+
g.destroy()
9085
}
9186
this._lines.length = 0;
9287
}

‎src/components/audio/StaticAudio.ts renamed to ‎packages/media-extention/StaticAudio.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ComponentBase } from '../ComponentBase';
1+
import { ComponentBase } from '@orillusion/core';
22
import { AudioListener } from './AudioListener';
33
/**
44
* Static audio component, volume level does not vary depending on the position of the monitor
@@ -20,7 +20,7 @@ export class StaticAudio extends ComponentBase {
2020
constructor() {
2121
super();
2222
}
23-
public setLister(listener: AudioListener): this {
23+
public setLisenter(listener: AudioListener): this {
2424
this.listener = listener;
2525
this.context = listener.context as AudioContext;
2626
this.gainNode = this.context.createGain();
@@ -103,9 +103,6 @@ export class StaticAudio extends ComponentBase {
103103
protected connect() {
104104
this.source?.connect(this.gainNode as GainNode);
105105
}
106-
public onUpdate() {
107-
super.onUpdate();
108-
}
109106
public destroy(force?: boolean) {
110107
this.stop();
111108
this.gainNode?.disconnect();

‎packages/media-extention/index.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,8 @@ import { ChromaKeyMaterial } from './ChromaKeyMaterial'
22
import { ImageMaterial } from './ImageMaterial'
33
import { VideoMaterial } from './VideoMaterial'
44
import { VideoTexture } from './VideoTexture'
5+
import { AudioListener } from './AudioListener'
6+
import { PositionAudio } from './PositionAudio'
7+
import { StaticAudio } from './StaticAudio'
58

6-
export {ChromaKeyMaterial, ImageMaterial, VideoMaterial, VideoTexture}
9+
export {ChromaKeyMaterial, ImageMaterial, VideoMaterial, VideoTexture, AudioListener, StaticAudio, PositionAudio}

‎packages/media-extention/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@orillusion/media-extention",
3-
"version": "0.2.3",
3+
"version": "0.3.1",
44
"author": "Orillusion",
55
"description": "Orillusion Media Material Extention",
66
"main": "./dist/media.umd.js",

‎samples/audio/Sample_DynamicAudio.ts

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import { BoxGeometry, Camera3D, DirectLight, Engine3D, LitMaterial, KelvinUtil, MeshRenderer, Object3D, Scene3D, Vector3, Color, OrbitController, View3D, AtmosphericComponent } from '@orillusion/core';
2+
import { PositionAudio, AudioListener } from '@orillusion/media-extention'
3+
import { GUIHelp } from '@orillusion/debug/GUIHelp';
4+
5+
export class Static_Audio {
6+
lightObj: Object3D;
7+
scene: Scene3D;
8+
camera: Object3D
9+
mats: any[];
10+
audio: PositionAudio
11+
private a = 40
12+
private b = 80
13+
private angle = 0
14+
constructor() {}
15+
16+
async run() {
17+
Engine3D.setting.shadow.autoUpdate = true;
18+
Engine3D.setting.shadow.updateFrameRate = 1;
19+
Engine3D.setting.shadow.type = 'HARD';
20+
Engine3D.setting.shadow.shadowBound = 100;
21+
22+
await Engine3D.init({
23+
renderLoop: this.loop.bind(this)
24+
});
25+
this.scene = new Scene3D();
26+
this.scene.addComponent(AtmosphericComponent);
27+
28+
this.camera = new Object3D()
29+
this.camera.localPosition = new Vector3(0, 20, 50)
30+
let mainCamera = this.camera.addComponent(Camera3D)
31+
this.scene.addChild(this.camera)
32+
33+
mainCamera.perspective(60, Engine3D.aspect, 0.1, 20000.0);
34+
let orbit = this.camera.addComponent(OrbitController)
35+
orbit.target = new Vector3(0, 4, 0)
36+
orbit.minDistance = 10
37+
orbit.maxDistance = 200
38+
39+
let view = new View3D();
40+
view.scene = this.scene;
41+
view.camera = mainCamera;
42+
43+
Engine3D.startRenderView(view);
44+
await this.initScene();
45+
}
46+
47+
async initScene() {
48+
{
49+
let [speaker, man, music] = await Promise.all([
50+
Engine3D.res.loadGltf('gltfs/speaker/scene.gltf'),
51+
Engine3D.res.loadGltf('gltfs/glb/CesiumMan.glb'),
52+
fetch('https://cdn.orillusion.com/audio.ogg').then(res=>res.arrayBuffer())
53+
])
54+
speaker.localScale.set(4,4,4)
55+
speaker.rotationX = -120
56+
speaker.y = 0.5
57+
let group = new Object3D()
58+
group.addChild(speaker)
59+
group.y = 2
60+
this.scene.addChild(group)
61+
62+
man.name = 'man'
63+
man.scaleX = 10;
64+
man.scaleY = 10;
65+
man.scaleZ = 10;
66+
man.rotationX = -90;
67+
man.rotationY = -90
68+
man.localPosition.set(0, 0.5, 30)
69+
this.scene.addChild(man)
70+
71+
let listener = man.addComponent(AudioListener)
72+
let audio = group.addComponent(PositionAudio)
73+
audio.setLisenter(listener)
74+
await audio.loadBuffer(music)
75+
audio.refDistance = 10;
76+
audio.maxDistance = 100;
77+
audio.setDirectionalCone( 180, 230, 0.1 );
78+
audio.showHelper()
79+
80+
GUIHelp.init();
81+
GUIHelp.addButton('play', ()=>{
82+
audio.play()
83+
})
84+
GUIHelp.addButton('pause', ()=>{
85+
audio.pause()
86+
})
87+
GUIHelp.addButton('stop', ()=>{
88+
audio.stop()
89+
})
90+
GUIHelp.add({volume:1}, 'volume', 0, 1, 0.01).onChange( (v:number) =>{
91+
audio.setVolume(v)
92+
})
93+
GUIHelp.addButton('Toggle Helper', ()=>{
94+
audio.toggleHelper()
95+
})
96+
GUIHelp.open()
97+
}
98+
{
99+
let wall = new Object3D()
100+
let mr = wall.addComponent(MeshRenderer)
101+
mr.geometry = new BoxGeometry(40, 30, 1)
102+
let mat = new LitMaterial()
103+
mat.baseColor = new Color(1,0,0)
104+
mr.material = mat
105+
this.scene.addChild(wall)
106+
wall.z = -5
107+
}
108+
{
109+
let floor = new Object3D();
110+
let mr = floor.addComponent(MeshRenderer);
111+
mr.geometry = new BoxGeometry(3000, 1, 3000);
112+
let mat = new LitMaterial();
113+
mr.material = mat;
114+
this.scene.addChild(floor);
115+
}
116+
117+
/******** light *******/
118+
{
119+
this.lightObj = new Object3D();
120+
this.lightObj.rotationX = 35;
121+
this.lightObj.rotationY = 110;
122+
this.lightObj.rotationZ = 0;
123+
let directLight = this.lightObj.addComponent(DirectLight);
124+
directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
125+
directLight.castShadow = true;
126+
directLight.intensity = 30;
127+
this.scene.addChild(this.lightObj);
128+
}
129+
}
130+
loop(){
131+
let man = this.scene.getChildByName('man') as Object3D
132+
if(man){
133+
this.angle += 0.005
134+
man.x = this.a * Math.cos(this.angle)
135+
man.z = this.b * Math.sin(this.angle) + 30
136+
man.rotationY -= 0.005 * 180 / Math.PI
137+
}
138+
}
139+
}

‎samples/audio/Sample_StaticAudio.ts

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { BoxGeometry, Camera3D, DirectLight, Engine3D, LitMaterial, KelvinUtil, MeshRenderer, Object3D, Scene3D, Vector3, Color, OrbitController, View3D, AtmosphericComponent } from '@orillusion/core';
2+
import { StaticAudio, AudioListener } from '@orillusion/media-extention'
3+
import { GUIHelp } from '@orillusion/debug/GUIHelp';
4+
5+
export class Static_Audio {
6+
lightObj: Object3D;
7+
scene: Scene3D;
8+
camera: Object3D
9+
mats: any[];
10+
audio: StaticAudio
11+
constructor() {}
12+
13+
async run() {
14+
Engine3D.setting.shadow.autoUpdate = true;
15+
Engine3D.setting.shadow.updateFrameRate = 1;
16+
Engine3D.setting.shadow.type = 'HARD';
17+
Engine3D.setting.shadow.shadowBound = 100;
18+
19+
await Engine3D.init();
20+
this.scene = new Scene3D();
21+
this.scene.addComponent(AtmosphericComponent);
22+
23+
this.camera = new Object3D()
24+
this.camera.localPosition = new Vector3(0, 20, 50)
25+
let mainCamera = this.camera.addComponent(Camera3D)
26+
this.scene.addChild(this.camera)
27+
28+
mainCamera.perspective(60, Engine3D.aspect, 0.1, 20000.0);
29+
let orbit = this.camera.addComponent(OrbitController)
30+
orbit.target = new Vector3(0, 4, 0)
31+
orbit.minDistance = 10
32+
orbit.maxDistance = 200
33+
34+
let view = new View3D();
35+
view.scene = this.scene;
36+
view.camera = mainCamera;
37+
38+
Engine3D.startRenderView(view);
39+
await this.initScene();
40+
}
41+
42+
async initScene() {
43+
{
44+
let group = new Object3D()
45+
let speaker = await Engine3D.res.loadGltf('gltfs/speaker/scene.gltf')
46+
speaker.localScale.set(4,4,4)
47+
speaker.rotationX = -120
48+
//speaker.y = 1.5
49+
group.addChild(speaker)
50+
group.y = 2
51+
this.scene.addChild(group)
52+
53+
let listener = this.camera.addComponent(AudioListener)
54+
let audio = group.addComponent(StaticAudio)
55+
audio.setLisenter(listener)
56+
57+
await audio.load('https://cdn.orillusion.com/audio.ogg')
58+
GUIHelp.init();
59+
GUIHelp.addButton('play', ()=>{
60+
audio.play()
61+
})
62+
GUIHelp.addButton('pause', ()=>{
63+
audio.pause()
64+
})
65+
GUIHelp.addButton('stop', ()=>{
66+
audio.stop()
67+
})
68+
GUIHelp.add({volume:1}, 'volume', 0, 1, 0.01).onChange( (v:number) =>{
69+
audio.setVolume(v)
70+
})
71+
GUIHelp.open()
72+
}
73+
{
74+
let wall = new Object3D()
75+
let mr = wall.addComponent(MeshRenderer)
76+
mr.geometry = new BoxGeometry(40, 30, 1)
77+
let mat = new LitMaterial()
78+
mat.baseColor = new Color(1,0,0)
79+
mr.material = mat
80+
this.scene.addChild(wall)
81+
wall.z = -5
82+
}
83+
{
84+
let floor = new Object3D();
85+
let mr = floor.addComponent(MeshRenderer);
86+
mr.geometry = new BoxGeometry(3000, 1, 3000);
87+
let mat = new LitMaterial();
88+
mr.material = mat;
89+
this.scene.addChild(floor);
90+
}
91+
92+
/******** light *******/
93+
{
94+
this.lightObj = new Object3D();
95+
this.lightObj.rotationX = 35;
96+
this.lightObj.rotationY = 110;
97+
this.lightObj.rotationZ = 0;
98+
let directLight = this.lightObj.addComponent(DirectLight);
99+
directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
100+
directLight.castShadow = true;
101+
directLight.intensity = 30;
102+
this.scene.addChild(this.lightObj);
103+
}
104+
}
105+
}

‎src/index.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,6 @@ export * from "./components/anim/skeletonAnim/buffer/SkeletonBlendComputeArgs"
121121
export * from "./components/anim/skeletonAnim/buffer/SkeletonTransformComputeArgs"
122122
export * from "./components/anim/skeletonAnim/shader/compute_skeleton_blend"
123123
export * from "./components/anim/skeletonAnim/shader/compute_skeleton_transform"
124-
export * from "./components/audio/AudioListener"
125-
export * from "./components/audio/PositionAudio"
126-
export * from "./components/audio/StaticAudio"
127124
export * from "./components/controller/CameraControllerBase"
128125
export * from "./components/controller/FirstPersonCameraController"
129126
export * from "./components/controller/FlyCameraController"

0 commit comments

Comments
 (0)