Optimisation of code : Creation of a gallery

Questions
, ,
1

Hi everybody,

Happy New Year !

I have some interrogations about a project I made few months ago : I recreated the Shutdown Gallery website, where you can visit an exhibition, but I made it multi-player : you can see it on oskawa.fr

I used the PointerLockControls demo and because I didn’t want to use any Physics library ( and because I don’t know how to use it), I used a simple function to make the collision between the camera and the walls. Also, I used Firebase to make the visit a little more dynamic : you can discover the exhibition with a friend and see him walk.

(Since the last THREE Update, I have a problem with the envmap, so you can’t really visit…)

For this project, I made it with the Wordpress CMS, to automaticaly create exhibitions, upload the GLTF file, etc. But since, I learned Vue (And Nuxt), and now, I tend to recreate my old projects with this technology, like my portfolio(HERE), and I want to use SocketIO for the multiplayer.

It’s also time to refactor my code, to create something more readable, so here I am, I have some questions !

  1. When I make the collision, the code will check every meshes in my GLTF file, and will create simple boundaries. It works well with walls, but to work, I need to create a 3D file with 1 mesh = 1 wall. It’s not practical when you decide to model something… ( As you can see in the screenshot)

screenshot-c4D
screenshot-c4D1920×1008 201 KB

So I would like to know :

  • Is there a way to make complex boundaries with a single mesh?
  • Do I need to use physics library ? If yes, I didn’t find anything, I don’t really understand the documentation (I tried to use cannon-es). Could you advise me ?
  • If I want to make stairs, how can I make the player up and down?

Also, here the Collision code :

// cube is the player
// objects is the array of all the meshes in my GLTF model
  function collision() {
        cube.position.copy(controls.getObject().position)
        cameraBox.copy(cube.geometry.boundingBox).applyMatrix4(cube.matrixWorld)
        for (var i = 0; i < objects.length; i++) {

            collisionBox.copy(objects[i].geometry.boundingBox).applyMatrix4(objects[i].matrixWorld)

            if (cameraBox.intersectsBox(collisionBox)) {
                controls.getObject().position.copy(currentPosition)
            }
        }
        currentPosition.copy(controls.getObject().position)
    }

I would like your wisdom to clear my mind !
Thank you very much.