creating the videosphere player component
We want the videosphere to expand when users click on it, just as we did with the photosphere, so we're going to make a component that does this for us. All in all we want our component to do a few things:
- expand the videosphere so that it makes up the background of the scene
- play the videosphere so that it plays on all devices
- cause the elements in the scene with class="homeworld" to disappear so that the videosphere is in full view
Doing all of these things will combine things that we've done before in our sphereexpand component and our videocontrols component, so it shouldn't be too tough.
First, I made a new JavaScript file in Glitch and named it public/js/videosphereexpand.js
I made a new component in that file by copying and pasting in the code from the componentstarter.js file you can see in the Glitch project, and I gave the component a name of videosphereexpand:
AFRAME.registerComponent('videosphereexpand', {
init: function () {
}
});
Inside of init, I make references to the elements in the scene that I need to modify: the videosphere asset itself inside of a-assets (just as we did in the videocontrols.js component), the a-videosphere entity, and all of the entities with class="homeworld" (just as we did in sphereexpand.js). In my HTML, the videosphere asset in a-assets has id="spherevidclip", the a-videosphere entity has id="videosphereentity", and all of the entities that should disappear once a sphere is expanded have class="homeworld", so here's how I made references to all of them in my new component.
let videosource = document.querySelector('#spherevidclip');
let videosphere = document.querySelector("#videosphereentity");
let homeworldelements = document.querySelectorAll(".homeworld");
Now, I need to define the function that does what I want once the user clicks on the videosphere. I'm going to call the function videosphereloader, so it starts off looking like this:
let videosphereloader = () => {
}
Inside the curly braces we put all the code we want to run, or execute, when this function gets called. We're just defining the function at this stage, not "calling" it.
Just as we did in the previous part of this project with video, we can use .play right on the video asset, which we've made a reference to as videosource above. So that looks like:
videosource.play();
I also want to change the radius of the a-videosphere entity so that the sphere takes up the whole viewing perspective, and we can do that with something we've already learned: .setAttribute
Remember, .setAttribute lets you add or modify attributes on your entities. In this case, we want to set the radius attribute so that instead of being ".7" (its starting value in the HTML), it's much bigger. So I'll do this, using the videosphere variable that I made above with let videosphere
videosphere.setAttribute("radius", "4200");
Why did I make it 4200? Well, we have an a-sky in our scene, and I saw in the documentation for a-sky that the a-sky has a radius of 5000. I wanted the radius of this to be smaller so that it wouldn't conflict with the a-sky at all.
Finally, I do the same thing to the homeworldelements that I did in Project 4 where I iterated through the list of homeworldelements and for each one, I set its visible component to false by doing a .setAttribute on the visible attribute.
homeworldelements.forEach((homeworldelement) => {
homeworldelement.setAttribute("visible", false)})
That will wrap up the function. Finally, I add an eventListener that will call my new videosphereloader function as soon as a click is detected on this - with this being whatever entity I end up attaching this entire component to in my HTML.
this.el.addEventListener('click', videosphereloader);
See the full component by checking out the embedded project above and viewing the public/js/videosphereexpand.js file.
.gif)
