I noticed different screen sizes cause incorrect positioning of objects

[garryygpw]

I noticed different screen sizes cause incorrect positioning of objects.

Best example of this is using this page:

http://threejs.org/examples/#canvas_interactive_voxelpainter

On larger laptop screen the cubes are positioned correctly, when viewing the same page on a smaller smartphone screen blocks are positioned in consistently incorrect positions.

Click in the bottom right corner of the grid and the blocks get positioned in the center

[mrdoob]

Hmmm, could you share screenshots?

[garryygpw]

Hello mrdoob, The device i used is a HTC one mini as you can see when i click on the grid in the bottom right corner the block appears in the middle left.

To let you know the webgl voxel painter demo on the same pages works fine on the same device

http://threejs.org/examples/#webgl_interactive_voxelpainter

[michelgokan]

It also have the same problem when your browser is in zoom mode (cmd+plus).

[garryygpw]

Thanks for your comment

I looked at the previous release example code and found r28 worked fine. Since then none of the other release example code seemed to work for the voxelpainter example.

Adding render() to the onDocumentMouseDown function got it working fine on the HTC one mini smartphone:

function onDocumentMouseDown(event) {
    event.preventDefault();
    // Adding render(); fixes the issue
    render();

[mrdoob]

What mobile browser is that with?

[garryygpw]

Default android browser v 6.0.798481 on a HTC one mini 2. Android version 4.4.2. I think this version uses the Chromium 30 browser. Am using the browser is an application using webview

[mrdoob]

I see. I was confused because that example doesn't have touch events.

[garryygpw]

Thanks for the info.

I thought might have worked ok. I understand is a little old now but used your r28 version (http://mrdoob.com/projects/voxels/) in the mobile browser with cubes being placed in the correct places perfectly.

I'd like to use merge with cubeGeometry and place the cubes in the correct place. Will keep trying, thanks for your comments

[garryygpw]

Am so pleased got the example working for r71. In function onDocumentMouseDown(event) changed the following:

from

mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;

to

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

Thanks again for your help

[mrdoob]

Yays!