Code for raycasting in three.js using Javascript may encounter compatibility issues on retina display Mac computers

Can anyone shed some light on why the interactive cubes below aren't functioning properly on Macs with retina displays?

The code runs smoothly on Firefox, Safari, and Chrome on non-retina MacBooks, but experiences issues on Macs equipped with retina displays.

Specific Mac models affected include: MacBook Pro with retina display, iMac with retina display, and MacBook Pro 2011 (no retina display), all running Yosemite.

Browser versions tested: Firefox 36, Safari Version 8.0.3 (10600.3.18), Chrome Version 40.0.2214.115 (64-bit)

Answer №1

When using renderer.setSize(), the renderer's domElement or canvas is scaled according to the pixel ratio.

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

For example, in the interactive cubes demo, the normalized mouse coordinates are set as follows:

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

This setup might encounter issues on devices with a non-unity pixel ratio.

It's worth noting that in the interactive particles demo, the normalized mouse coordinates are computed differently with no such problems.

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

To address this, opt for the latter approach for now.

We might need to reassess how device pixel ratio is managed in upcoming releases of the library.

EDIT: @mrdoob recommends the following method as a fix:

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

three.js r.70

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered when assigning a new value to a private class property at a global scope in JavaScript

I am encountering an issue in my code where I define a private class member using "#", initialize it in the constructor, and then receive an error when attempting to set/access the value. Uncaught TypeError: Cannot read private member #mouse from an object ...

Having trouble extracting the Top-Level Domain from a URL

I'm struggling to find a reliable way to extract the Top-Level Domain from a URL. The challenge I'm facing is that the URLs entered by users can vary greatly - they might enter www.google.com, m.google.com, m.google.uk, google.uk, or www.m.google ...

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

I'm currently working on a checkbox filter setup and using Jquery's .filter to sort through some divs. Below is the snippet of Jquery code that I am using: $(document).ready(function(){ var checkboxes = $('div.filter-groups').find(&ap ...

Is there a way to trim JSONP data to only obtain the year value

My current setup involves using an API to fetch data, which includes the release date of a game. '<h4 style="display:inline-block; padding-left:5px;" class="post-title">' + game.name + ' <span class="small">' + game.origin ...

Tips for transferring POST body data to a different route without losing any information

Assuming I have the following route: app.post('/category',function(req,res){ res.redirect('/category/item'); }) In this scenario, the user will submit data to the '/category' route and then automatically be redirected ...

Using JavaScript to automate keystrokes programmatically

Is there a way to programmatically close a webpage using the keyboard shortcut control + W? I'm wondering if I can write code that will mimic this specific shortcut (control+W). ...

Implement event listeners for multiple buttons using Handlebar.js templates, but only the final one will be active

For a homework assignment, I am developing a web app that utilizes websockets to receive server messages and then displays them on an HTML page using handlebars.js. One feature I am trying to implement is the ability to delete a message with the following ...

JavaScript encountered a server error when attempting to utilize emotion/styled

import Link from "next/link"; import Image from "next/image"; import { Text, useColorModeValue } from "@chakra-ui/react"; import { styled } from "@emotion/styled" const LogoBox = styled.span` font-weight: bold; font ...

How to Validate Prop Types in VueJS When Dealing With NULL and 'undefined' Values?

Despite what the official VueJS 2 documentation on prop validation says in a code example comment: // Basic type check (null and undefined values will pass any type validation) I encountered an error while testing this piece of code — could you explai ...

Looking to target an element using a cssSelector. What is the best way to achieve this?

Below are the CSS Selector codes I am using: driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg-technik='append_numbers']")).click(); driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg- ...

Ways to address the CORS problem in an ajax function without relying on json

When I run my ajax function: function fn_nextitem(sliderNo){ $.get("/index.php?op=ajax", {slide_no:sliderNo},function(resp) { if (resp) { $('#Div').append(resp); } else { } } This is how my ph ...

Struggling to get this bootstrap carousel up and running

I can't seem to get this bootstrap carousel to switch slides, whether I use the indicators or arrows. My other carousel works perfectly fine and I've added all necessary Bootstrap and JavaScript CDNs. I'm puzzled as to why it's not func ...

The protection ensured by employing an extensive hash in the query string for the recognition of a changing document

I am currently developing a small web application that creates exercise program printouts. The concept is simple - a user like a personal trainer can craft an exercise regimen and send it to their client via email using a unique link. http://www.myurl ...

Distributing actions within stores with namespaces (Vuex/Nuxt)

I'm encountering an issue with accessing actions in namespaced stores within a Nuxt SPA. For example, let's consider a store file named "example.js" located in the store directory: import Vuex from "vuex"; const createStore = ...

Embedding the local host into a href link in NextJS

After creating a menu with the Link component in NextJs using href=#contact, I encountered an issue. When I use querySelector on this a element, the href unexpectedly changes to http://localhost:3000/#contact', preventing me from scrolling to that sec ...

Align the image in the middle using JavaScript for Firebase

I am struggling to display the center of an image within a circle-shaped <img> tag with a border-radius of 50%. The issue arises when trying to display an image fetched from Firebase storage, rather than from a URL. In attempt to solve this problem, ...

Looking to organize my divs by data attributes when clicked - how can I achieve this with javascript?

I am looking to implement a dropdown sorting functionality for multiple divs based on different data attributes such as price and popularity. The specific divs are labeled as "element-1" and are contained within the "board-container". var divList = $(". ...

Encountering a 404 error when translating URLs in Next.js i18n?

I am developing a multilingual service utilizing next-i18next. I wanted to have some of my routes translated as well, for example: EN: /contact => default language IT: /fa/ارتباط-با-ما => second language To achieve this, I utilized tran ...

Having trouble getting JavaScript to replace tags in HTML

I've been working hard to replace all the shared code in posts on my website, but I'm having trouble getting it to work. I want everything inside <pre><code></code></pre> tags to be colorized using CSS. Here's a sampl ...

Image carousel with interactive buttons

I've taken over management of my company's website, which was initially created by someone else at a cost of $24,000. We recently made some edits to the slideshow feature on the site, adding buttons that allow users to navigate to corresponding p ...