I'm curious how other people implemented it

Customization
1

I saw someone else’s implementation in the showcase.

link : Bürstenfabrik Keller GmbH / Showroom

I am curious about two things.

First, how can I implement the effect of panels appearing and disappearing when switching between two scenes (Haushaltspflege, Tierpflege) repeatedly?

Second, after moving to the Faller scene, how can we implement the effect of hearing the sound of water or not depending on the distance of the stream when it moves?

Please give me some good ideas.

2

Hi,

I can answer your second question. If you want to have an audio played or paused depending on where you are you can use the Camera Volume Trigger to activate the Audio extension whenever you enter the volume and deactivate it whenever you exit it.

I hope this helps

3

I really appreciate your advice

4

Hi,

I did the programming for this application. Explaining in detail how this was all done would go beyond the scope here. But you are welcome to contact me if you need support.

Not only can we now change the volume of audio depending on distance, we have been able to integrate 3D spatial audio.
Like in this example:

cheers

Simon

2 Likes
5

hello @simon, This is awesome and I’ve been looking for this for days!
I would like you to be able to indicate how to do the effect of the audio, start it and give it volume in relation to the distance of the sound source. Could you tell me how to do that please?

Grettings
Jorge.

6

Simply controlling the volume depending on the position is actually relatively easy.

Eine stetige Positionsabfrage könnte man z.B. mit mit setInterval umsetzen. Also z.B.

window.setInterval(yourTimerFunctionHere, 50);

In your TImer function you could permanently query the camera position using the viewer API. Example:

const position = viewer.getCameraPosition();

Now you need the position from which the sound will be played. You could define this yourself with a Vector3

const origin = new THREE.Vector3(x, y, z);

or you could take the center of an object in the scene:

const node = viewer.findNodesOfType("YourObjectName")[0]; // Takes the first object with this name
const origin = node.mesh.geometry.boundingSphere.center;

Of course, you should check whether the object exists and is also a mesh.
You can then calculate the distance:

const distance = position.distanceTo(origin);

Then you have to calculate the volume and apply it to the audio element:
Example:

const maxDistance = 10; // example

if (distance >= maxDistance) {
    return 0;
}
if (distance < 0) { 
    distance = 0;
}

const volume = 1 - (distance / maxDistance);

yourAudioElement.volume = volume;

This would be the rough approach. Depending on what your application looks like, the implementation may vary.

1 Like
7

Thank you @simon for your immediate response!
I don’t know code, but I’ll try to replicate what you’re pointing out here.

Regards
Jorge