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 myjs/libs
folder, and I made another one inside myassets/objects
folder to try it out there too. I then tried importing it in myenvironment.js
andscene.js
, but failed to import the object withimport { Water } from ./assets/objects/Water.js
due to the following error" Cannot use an import statement outside of a module."
- I downloaded
- 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?