# WebGL interactive voxelpainter size cubes

**URL:** <https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209>\
**Category:** Questions\
**Tags:** examples\
**Created:** [June 14, 2021, 12:17pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209 "2021-06-14T12:17:56Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [June 14, 2021, 12:17pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/1 "2021-06-14T12:17:56Z")

</div>

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

Changed lines

```javascript
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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 14, 2021, 12:25pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/2 "2021-06-14T12:25:51Z")

</div>

Have you also updated the following line of code?

> <https://github.com/mrdoob/three.js/blob/d39d82999f0ac5cdd1b4eb9f4aba3f9626f32ab6/examples/webgl_interactive_voxelpainter.html#L165>

---

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [June 14, 2021, 2:21pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/4 "2021-06-14T14:21:17Z")

</div>

yes, i created a codepen to show the result

https://codepen.io/kanopa/embed/preview/QWpJYdv?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=QWpJYdv

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 14, 2021, 3:15pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/5 "2021-06-14T15:15:12Z")

</div>

Try to compute the pointer coordinates like so:

```nohighlight
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.

---

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [June 14, 2021, 3:41pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/6 "2021-06-14T15:41:33Z")

</div>

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 );`

https://player.vimeo.com/video/562831771

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 14, 2021, 3:55pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/7 "2021-06-14T15:55:12Z")

</div>

In your case the formula can be simplified to:

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

```

You also need this logic in `onPointerMove()`.

---

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [June 14, 2021, 4:03pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/8 "2021-06-14T16:03:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [June 15, 2021, 11:10am UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/9 "2021-06-15T11:10:47Z")

</div>

You have some idea how to fix this?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 15, 2021, 11:30am UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/10 "2021-06-15T11:30:31Z")

</div>

Try it with:

```javascript
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`.

---

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [June 15, 2021, 11:44am UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/11 "2021-06-15T11:44:03Z")

</div>

Thank you very much 🙂 🎉

---

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [June 15, 2021, 2:12pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/12 "2021-06-15T14:12:51Z")

</div>

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

https://player.vimeo.com/video/563250048

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 15, 2021, 3:51pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/13 "2021-06-15T15:51:10Z")

</div>

Next try:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [June 16, 2021, 8:54am UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/14 "2021-06-16T08:54:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 16, 2021, 11:56am UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/15 "2021-06-16T11:56:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [June 16, 2021, 12:28pm UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/16 "2021-06-16T12:28:05Z")

</div>

Thanks for the help!

---

<div class="post-metadata">

**Author:** ![kanopa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kanopa/32/18906_2.png) [@kanopa](https://discourse.threejs.org/u/kanopa)\
**Post date:** [July 1, 2021, 10:25am UTC](https://discourse.threejs.org/t/webgl-interactive-voxelpainter-size-cubes/27209/17 "2021-07-01T10:25:59Z")

</div>

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);