First 3D game - Create 3D world from illustration

Questions
1

I intend to create a game where a character can move around the following 3D illustration.

image
image.jpg2031×2048 1.63 MB

I have a few initial questions:

  1. How would I create just one of those buildings to match that illustration? Would I build it from component cubes with specific color values? Or would I set each building wall to be a sprite and apply some shading magic?
  2. The camera angle need not necessarily change as the character moves around the map. In which case might it be easier to keep this image as the final interface and create some invisible buildings so that the character cannot walk through buildings. Also creating an invisible floor so the character changes in size as they move away from the camera.

PS Sorry for being a noob

Would appreciate some links for more reading, thanks.

2

Instead of creating the buildings directly in threejs you can create them in a 3d creation tool like Maya or Blender and export them in a compatible format for loading into your threejs application.

For your camera angel check out the map camera control example of threejs here

1 Like
3

I also suggest you use some 3D editing software too, three.js is not really intended for that. I recommend Blender, as it’s free and plays well with three.js. You can find more information on it elsewhere.

As for the assets themselves - I suggest cutouts, if you use OrthographicCamera and fix the viewing angle - that way you can preserve the illusion and hide the fact that models are actually just cutouts.

here’s what I mean by a cutout:

image
image555×555 31.9 KB

have fun :slight_smile:

4 Likes
4

Maybe the easiest way to create a scene like that would be in something like OpenSim. That is a 3D world where your character can walk around and build things on the ground. A lot of people create beautiful scenes with it, that have no experience with 3D modelling. Blender and Maya take a while to learn. (Blender took me 10 years. lol)

The viewers that you use to play OpenSim, are capable of exporting Collada, which can be used with Threejs, or loaded into Blender for some touch-up later.

I run an OpenSim grid that is free to join and use https://hgluv.com/ A lot of the components in the picture, like the trees, the phone booth, and things like that are available and fairly easy to find. It might get you off to a good start. :slight_smile:

1 Like