CSG Editer ‘Pile-Up‘

Demos and projects
1

Hi everyone,

Created a website that allows users to build 3D models with a GUI using CSG.

pile-up2x
pile-up2x1200×675 46.6 KB

4 Likes
2

Fun ! :+1:

As a feedback I would say I struggled a lot with camera. On my side it looks like an ArcRotateCamera but with inversed Y, and inversed Zoom, is it intentional ?

Also, I cannot use 3D camera zoom on a canvas, without scrolling the webpage. You can fix this with :

canvas.addEventListener('wheel', function (event) {
    event.preventDefault();
}, { passive: false });

(Just tested with Chrome console on your website, it works :slight_smile: )

2 Likes
3

Thank you!

The point about wheel events has been incorporated.
It is now easier to operate.

On my side it looks like an ArcRotateCamera but with inversed Y, and inversed Zoom, is it intentional ?

I checked, but I’m a little unsure how to fix it.
Actually, I didn’t feel very comfortable about the current behavior.
If I can make it better, I would like to incorporate it.

4

Ok I found the problem :

  • Your camera radius is inverted at load (which is weird, by the way, like if you had set up a negative radius or something like this :thinking: )
  • To test it, you can zoom in until it reverses again, and then it’s OK, and back to normal

A fix would be to set limits to the zoom, for example :

camera.lowerRadiusLimit = 2.0;
camera.upperRadiusLimit = 20.0;
5

Thanks!.

Maybe this is the part.

const camera = new BABYLON.ArcRotateCamera(
    "Camera",
    (Math.PI * 60) / 180,
    (Math.PI * 120) / 180,
    -30, // <=  this?
    BABYLON.Vector3.Zero(),
    scene,
  );
6

Ah yes, absolutely ! Why setting a negative camera radius here ? :thinking:

(By the way, if you want you can replace (Math.PI * 60) / 180 by BABYLON.Tools.ToRadians(60) :wink: )

7

The ‘-30’ setting was a countermeasure to the fact that the shape would look up. If there is a better way, we would like to address this.

SnapCrab_NoName_2024-7-11_0-45-4_No-00

I wanted the angle to look down from an angle.

SnapCrab_NoName_2024-7-11_0-48-36_No-00

8

No way ! :sweat_smile:

The ArcRotateCamera constructor is :
BABYLON.ArcRotateCamera(name: string, alpha: number, beta: number, radius: number, target: BABYLON.Vector3, scene)

The beta angle is the one you want to tweek. 120° means more than 90°, that’s why you look from under. Replace 120 by 60 and you are done ! :slight_smile:

1 Like
9

I had done some strange things to try to make it add up.

Thank you very much.

I deployed the updated version, so the current one should be easier to use.

Thanks so much.

1 Like