Curved rectangles (cubes)

11121 · January 2, 2020, 2:49pm

Hello everybody! I would be glad if someone tells me how to draw such a map. Suppose I don’t know how to draw such curved rectangles.

Mugen87 · January 2, 2020, 4:10pm

Have you considered to design such a map in a DCC tool like Blender? This is probably the most easiest/flexibel approach since no coding is required.

yannick · January 2, 2020, 4:14pm

You could also use two half cylinders (a big and a small) and subtract the small one from the big using a library like https://github.com/Hi-Level/three-csg.

This is how I do it

11121 · January 3, 2020, 8:05am

thanks! And you do not tell me how to tie physics to these figures? At the moment, I use omio.js, but as far as I know, it has only primitive figures

prisoner849 · January 3, 2020, 9:19am

Another option is to use THREE.ExtrudeBufferGeometry(), based on SVG or shapes you define.

yannick · January 3, 2020, 9:54am

I do not know oimo.js, I use ammo.js.

I’m actually about to create a library which does not only this but more. For now it only works in combination with Phaser. If you take a look at the source code, you will find how I did it.

I will create a stand alone version soon.

Here is an example:
https://enable3d.io/examples/constructive-solid-geometry-physics.html

And somewhere here I add physics to the new mesh:

github.com

yandeu/enable3d/blob/714cb9d19ecd8a6b2e0667f227c41b743d62dc48/packages/enable3d/src/ammoWrapper/ammoPhysics.ts#L337


      // todo: might want to return null xform if this is the root so that callers can avoid multiplying
      // things by the identity matrix
      cb(mesh.geometry.isBufferGeometry ? mesh.geometry : bufferGeometry.fromGeometry(mesh.geometry), transform)
    }
  })
  // }
}


/** Add a custom convex or concave shape. (Concave shapes can only be static) */
// originally copied from https://github.com/InfiniteLee/three-to-ammo
private addTriMeshShape(mesh: ExtendedObject3D, meshConfig: any = {}) {
  const va = new Vector3()
  const vb = new Vector3()
  const vc = new Vector3()


  meshConfig.type = 'mesh'
  const shape = mesh.shape || 'convex' //  or 'concave'


  const bta = new Ammo.btVector3()
  const btb = new Ammo.btVector3()
  const btc = new Ammo.btVector3()

Hope this helps

11121 · January 3, 2020, 2:45pm

Sorry, can I operate with three figures? Well, that is, there are three figures, I subtracted the other from one and want to subtract the third from the result. But for some reason it didn’t work out for me ((

yannick · January 3, 2020, 4:17pm

Yes, you can subtract a three mesh from another.

Maybe this helps:

I built an example which uses the same shapes as you need. It uses Phaser.io and enable3d.io (which uses three.js and ammo.js)

https://enable3d.io/examples/dash-and-blast-prototype.html

11121 · January 3, 2020, 5:14pm

Thank . Cool game:)

yannick · January 3, 2020, 8:52pm

@11121 I found a simpler way to do it the same shape!

https://jsfiddle.net/yandeu/83sdw5m2/

baronwatts · January 4, 2020, 8:51pm

Physics engines like Oimo.js and Cannon.js have heightmaps built into the library. Easiest approach is to create an image heightmap and rendering it. Black being the low level and white being the elevated level.

Example:
https://jsfiddle.net/Screwhead28/4ovmru0d/