Creating an environment

Our task this week was to start from Aidan Nelson’s template, which includes the files for a threeJS template that “allows multiplayer three.js scenes with integrated audio/video capabilities. It uses a node server running socket.io to provide multiplayer functionality as well as WebRTC signaling.” After you download and run the npm run start command inside the root folder, a browser window should open and ask for permission to access your browser camera and mic. After you comply you should see your head(fortunately) popping on the surface of a Cube-like character.

It is pretty much as simple and effective as possible to get you up and running with multiplayer capabilities (after you’ve hosted it online), with the main components being scene.js and environment.js. What I did was instantiate a bunch of the spheres that came with the template (5000), and then set up six lights to rotate around the center. I also changed my main shape to the sphere as well. Below you can see some of the tests I made, as well as the GitHub repository, and a couple of questions that still remain.

Questions:

• How to import and use Three.js objects such as water and sky?
  • I downloaded Water.js and set it inside my js/libs folder, and I made another one inside my assets/objects folder to try it out there too. I then tried importing it in my environment.js and scene.js, but failed to import the object with import { Water } from ./assets/objects/Water.js due to the following error " Cannot use an import statement outside of a module."
• While testing three.js by itself, and also checking the network tab in chrome dev tools, I didn’t get to see where most of the loading delay for the frontend was happening. Suppose I would want to make a loading bar, what data would I measure? How can I establish a percentage of how much has loaded? Or does it all just kind of have to be faked with asynchronously loading animations/loading bars?

---