WebGL interactive voxelpainter size cubes

Questions
1

Hello, when I change the size of the cube from 50 to 1, the cube starts to position itself incorrectly

Changed lines

const gridHelper = new THREE.GridHelper( 100, 100 );
const geometry = new THREE.PlaneGeometry( 100, 100 );

cubeGeo = new THREE.BoxGeometry( 1, 1, 1 );
voxel.position.floor().addScalar( 0.5 );

const rollOverGeo = new THREE.BoxGeometry( 1, 1, 1 );
rollOverMesh.position.floor().addScalar( 0.5 );

Can you please tell me what I’m doing wrong?

2

Have you also updated the following line of code?

4

yes, i created a codepen to show the result

5

Try to compute the pointer coordinates like so:

const rect = renderer.domElement.getBoundingClientRect();
pointer.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
pointer.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

The official example assumes a full-screen canvas which is not true in context of a codepen.

6

The main problem is that when I start placing the cube on the cube, the assistant cube starts to shake and is basically displayed one block away from the cube on which the cursor is. I recorded a video to make it clearer what I will enter. I changed the codepen and remove scroll, thanks for your prev answer.

I think the problem on this line voxel.position.divideScalar( 1 ).floor().multiplyScalar( 1 ).addScalar( 0.5 );

7

In your case the formula can be simplified to:

voxel.position.copy( intersect.point ).add( intersect.face.normal );
voxel.position.floor();

You also need this logic in onPointerMove().

8

Changed the formula, works better, but still not as good as in the example. Cubes are placed directly on the intersection of the grid, and if you click on a separate place several times, the cubes will be placed one in one

9

You have some idea how to fix this?

10

Try it with:

voxel.position.copy( intersect.point ).add( intersect.face.normal );
voxel.position.subScalar( 0.001 ).floor().addScalar( 0.5 );

This should work better with a grid size of 1.

11

Thank you very much :slightly_smiling_face: :tada:

12

Sorry for asking so much. Why, when I try to add a cube on the other side, it is placed at a distance of 2 from the cube on which the mouse is standing. Added a video to show the issue

13

Next try:

voxel.position.copy( intersect.point ).add( intersect.face.normal );
voxel.position.multiplyScalar( 0.999 ).floor().addScalar( 0.5 );

For clarification: The problem is that the grid size is 1 as well as the length of the normal vector. The idea is to slightly scale the normal vector down so floor() produces the expected result.

14

I understand what the problem is, but I cannot find such a value at which it would work well :frowning:

15

Sorry, but I won’t invest more time in this issue. I hope somebody else from the community can jump in.

16

Thanks for the help!

17

Solution for 1 x 1 x 1 size, we need to add name to our plane (this.plane.name = ‘plane’) and get intersect.object.position instead of object.point

voxel.position
.copy(intersect.object.name === ‘plane’ ? intersect.point : intersect.object.position)
.add(intersect.face.normal);

voxel.position.floor().addScalar(0.5);