Gym Designer, Dissertation Project (Feedback very welcome)

Hi All,

I am doing an Interactive Media Masters in UCC, Ireland, and for my dissertation project I’ve created a Gym Designer with three.js. I’ve been woking on this over the course of the summer, and I’ve had many questions answered on this forum. I’m so grateful for everyone who helped me on this, I’ve only picked up three.js/javascript this year, and would have stuck a lot otherwise.

I’m currently writing up the thesis part of the project. One of the sections is centred around user feedback/evaluation. While feedback from friends/other students helps a lot, feedback from fellow three.js creators would really look fantastic.

So if anyone would like to try the designer out, I would be extremely thankful as it would be a massive help to me. All I’m looking for is general feedback in terms of how you found the design, the controls, the features and using the application in general! :grinning:

Thank you vey much and here is the link: https://cs1.ucc.ie/~tpg1/testn/gymscene

1 Like

Hey I just tried out your App, wanted to give some feedback.
First of all, when I clicked sample setup, it froze my computer. There are some major performance issues. Its a bit slow when moving around, too. I recommend this page
What really helped me, was to update all objects in the scene manually, like so

gltfLoader.load('PATH', (gltf)=> {
    let model = gltf.scene
    
    // Steps through each obj of model
    model.traverse(obj => {
         // Set updating from auto to manual
         obj.matrixAutoUpdate = false
         // Update obj
         obj.updateMatrix()
    })
})

if you change any of the transforms (position, scale, rotation) of the obj, you need to update it

// Updates all objs of model
model.traverse(obj => obj.updateMatrix())

This will speed up your page, because now transform is only calculated when needed, not each frame. Meaning objs that arent moving, arent calculated anymore.

Second, the design is a little bit old school. I would recommend some color palette for web and a non-serif font.
The whole room remembered me of some sort of torture chamber or prison, which may be associated with a gym, but may also not be that inviting :stuck_out_tongue: Its kinda dark and lots of stone textures

Also you may want to use some Antialiasing and shadows

Greetings & keep on coding

2 Likes

It’s looking good so far. I agree with @Fluqz that the scene is too dark. A lighter color for the walls and sky would improve things a lot. You could also use a simple gradient skybox to make the sky less boring.
However, I didn’t get much freezing either on my phone or laptop, except when adding a machine to the gym.

Some other thoughts:

  1. adding a model to the scene takes a long time. Are the geometries too complex?
  2. a simple shadow under each machine would improve the appearance a lot. It doesn’t have to be realistic, a simple dark patch would be a good starting point. You can use a transparent PNG image for this, create a plane and attach it to the bottom of each machine, then use the PNG to create a shadow plane.
  3. When I try to right click and pan, the floor select menu opens and there’s no way to close it without changing the floor. Instead of opening the menu on right mouse down, start a timer on mouse down and if the mouse up is in less than 100ms or so, then open the menu. Otherwise, assume the user is panning the camera.
  4. It’s clearly not intended for use on mobile devices. If you don’t intend to add mobile support, there are ways to detect when a user is on mobile and display a message saying this is a desktop experience.
  5. Personal preference - I would start with all four floor pieces the same color, and make that wood, to make the scene brighter.
  6. You can limit how much OrbitControls can rotate horizontally. There’s no need to view the gym from underneath.

Obviously, you’re limited in how much time you can spend on this, so here’s a couple of things that would be nice but not important:

  1. Add a small image of each machine to the menu, next to each name.
  2. Even better shadows could be created by generating a shadow of each machine in a modeling program, then attach it the same way as described above. The car shadow in this example works like this.
  3. Some better styling for the navigation menu besides default buttons would be nice.

Since there is no movement in this scene, there’s no need to generate runtime shadows, however, you could do that but disable shadow autoupdate. Then whenever you add a machine to the gym, or move a machine, re-generate the shadow.

3 Likes

I like the idea of creating something that can be used to create something :slight_smile:
I had a problem with it where I couldn’t get any of the machines to add though. I’d press the button in the top menu and nothing would happen.

1 Like

Thanks so much for your suggestions @Fluqz and @looeee, I didn’t get a chance to respond as I was so busy with my write-up, but I did get the chance to implement some of the changes you mentioned. These definitely made the app a lot better and I will definitely get a better mark as a result! Thank you!!!

@kohloth I took the models which were previously used off the server as they were too complex as suggested by @looeee, but you can see the final version here :grinning:
https://cs1.ucc.ie/~tpg1/Guinee_Tiarnan_6200/gymdesigner.html

3 Likes

I can see it looks more refined now…one thing that I’d like to suggest though - you can get rid of those nasty scrollbars with just a bit of css: html { overflow: hidden }!