Hey y’all,
currently I am working on a little browser game and I need some help. With three.js I implemented a character and a 3d space, for the actual map I use a 3d rendered picture. But now I’m stuck into getting the 3d grid fitting the background scene (a first placeholder render to get everything right). How can I place the 3d grid to the actual plaza size so that the character won’t walk into the buildings behind him? I also want to keep the isometric view and the idea of using a picture for the background to reduce loading or lagging.
Are you using the threejs editor to build this? You can disable or resize the grid I think. Usually folks use the editor for a sort of pre-visualization, and then you export the code and build the rest of the app from app.
r.e. using a still image as the background, there are a few ways that can be done. For instance mapping a panoramic render of the scene onto a Sphere, with material.side = THREE.BackSide to show only the interior of the sphere… with that setup, you can even have some motion of the camera and still have it sort of track with the 3d parts of the scene.
But judging from the complexity of the scene, I would probably just do the whole scene in 3d. I think you can compress it down to something pretty small… and then perhaps use a panoramic image just for the sky and distant features.
1 Like
I haven’t used the threejs editor but I will, that sounds easier. Thank you!
Oh! I just assumed you were using the threejs editor because it has that grid built in, but if you already have your scene working in code, then you can keep going like that. 
The threejs editor is cool, but it’s another step that isn’t really neccessary when you’re fully in development… and using a content generation tool like Blender! (which I can highly recommend if you’re not already using it already)
Yeah all I did for now is made in Code only but the three js editor could be really helpful for things like lanterns or benches, items that will be interactive, so the character won‘t walk over them so thats a point for me using the editor. And yeah I‘m using blender for everything in 3d! the town will get a better look but for now its just all placeholders
Yeah. The only downside with using the threejs editor, is it can be more cumbersome to update/modify/see the results.
I usually like to do all level/map editing in Blender (with the eevee renderer enabled which can give you very close to exactly what you’ll see in threejs) and then export the entire scene with all its objects and animations into a single GLB file which I then load in my app.
So for instance… a blender file for each map/scene/level. One for the character and its animations…
and in the scene file, you can place “empty” objects as placeholders for where you are going to spawn objects and characters.
You load the scene glb file in your app, and use scene.traverse() to find all the objects you care about, and wire them into your simulation.
Do you have any experience with Blender?
Yes, I use blender for about 2 and a half years now. I did the character myself and I‘m doing art mainly with blender, from own work to commissions. I‘m on instagram (@_yanoto) if u want to check out my stuff 
1 Like
I could need some help for my project from someone like you who knows more about three js than me… is there any way to contact you?
Your work is cool. There’s 2 a couple easy-ish ways to get a little scene with collision and interaction… like…
three.js examples
and
three-mesh-bvh - Character Movement
1 Like
Thank you!