Prevent scaling in CSS3DRenderer

Question

Prevent scaling in CSS3DRenderer

For a detailed explanation of what I am attempting to achieve, please refer to my previous question here.

In summary: My goal is to have HTML elements rotate in sync with OrbitControls to give the illusion that these elements are attached to a globe and move along with it (similar to map markers on a 3D earth above specific countries).

I managed to accomplish this using the THREE.js CSS3DRenderer, successfully positioning the HTML elements on the 3D globe based on latitude and longitude calculations, making them rotate with the globe when using OrbitControls.

The issue

However, the problem I'm facing is that the HTML elements scale dynamically based on their proximity to the camera. While this may enhance the sense of distance, it complicates sizing consistency and causes blurriness/pixelation for text and SVGs inside the elements.

Desired solution

I am seeking a way to disable this scaling behavior so that the HTML elements retain their original size regardless of position within the 3D renderer created by CSS3DRenderer.

I anticipate having to modify the CSS3DRenderer.js code for this purpose, but I lack guidance on where to begin and haven't found relevant information elsewhere.

Thank you in advance.

Snippet of my code:

Initializing the CSS3DRenderer

//CSS3D Renderer
rendererHTML = new THREE.CSS3DRenderer();
rendererHTML.setSize(WIDTH, HEIGHT);
rendererHTML.domElement.classList.add('CSS3D-container');

containerHTML = document.querySelector('.globe__container');
containerHTML.appendChild(rendererHTML.domElement);

Resize function (triggered on window resize event)

HEIGHT = sizeControlElem.getBoundingClientRect().width;
WIDTH = sizeControlElem.getBoundingClientRect().width;

renderer.setSize(WIDTH, HEIGHT);
rendererHTML.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();

Creating CSS3DSprite objects from <li> elements in the HTML and assigning initial globe positions

for (let key in this.locationsObject) {

    _this.locationsObject[key].coordinates = calcPosFromLatLonRad(this.locationsObject[key].lat, this.locationsObject[key].long, 300);

    let CSS3D_Object = new THREE.CSS3DSprite(_this.locationsObject[key].element);
    CSS3D_Object.position.set(_this.locationsObject[key].coordinates[0], _this.locationsObject[key].coordinates[1], _this.locationsObject[key].coordinates[2]);
    CSS3D_Object.receiveShadow = false;
    CSS3D_Object.castShadow = false;
    sceneHTML.add(CSS3D_Object);

    _this.locationsObject[key].CSS_Object = CSS3D_Object;

    console.info(CSS3D_Object);
}

Additional code snippets can be viewed in the initial question here

javascript three.js

Answer 1

Answer №1

To halt the scaling process, it is essential to convert 3D positions to 2D using the Vector3.project() method. Refer to the code snippet below for details where I have highlighted key aspects in the JavaScript code. Here's a brief explanation:

Duplicate the 3D position of the hotspot into a new vector.
Utilize vector.project(camera) to translate the 3D point to 2D coordinates.
Adjust the range of 2D coords from [-1, 1] to [0, window.width]
Assign these coordinates through CSS to your hotspot element.

Bonus Tip: You can leverage the .z attribute of the 2D vector to identify whether it lies within the camera's frustum or not.

var camera, controls, scene, renderer;

// Initializing arrays for 3D positions and hotspot DIVs
var posArray3D = [];
var divArray = [];

// Creating temporary vector for reuse during loops
var tempVec = new THREE.Vector3();

init();
animate();

function init() {

// Setting up the scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.set( 400, 200, 0 );

// Initializing controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
// Additional control settings...

// Generating world elements
// Loop through random positioning...
 
window.addEventListener( 'resize', onWindowResize, false);

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

// Updating positions of all DIVs based on camera view
function updateDivs() {
var vectorScreen = new THREE.Vector3();

// Looping through all positions
for (var i = 0; i < posArray3D.length; i ++) {
vectorScreen.copy(worldToScreen(posArray3D[i], camera));

// Updating CSS attributes for each DIV
divArray[i].style.transform = "translate(" + vectorScreen.x + "px, " + vectorScreen.y + "px)";

// Checking depth, hiding if behind the camera
if(vectorScreen.z <= 1) {
divArray[i].style.display = "block";
} else {
divArray[i].style.display = "none";
}
}
}

// Projecting 3D coordinates to 2D space 
function worldToScreen(_position, _cam) {
tempVec.copy(_position);

tempVec.project(_cam);

// Converting range from [-1, 1] to [0, windowWidth]
tempVec.x = (   tempVec.x + 1 ) * window.innerWidth  / 2;
tempVec.y = ( - tempVec.y + 1 ) * window.innerHeight / 2;

return tempVec;
}

function animate() {

requestAnimationFrame( animate );

controls.update();
updateDivs();

render();

}

function render() {

renderer.render( scene, camera );

}

body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;

background-color: #fff;
margin: 0px;
overflow: hidden;
}
/*hotspotBox holds all .hotspots It's placed on top of WebGL canvas*/
#hotspotBox{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px dashed #f90;
pointer-events: none;
}
/*100 hotspots to be placed within #hotspotBox */
.hotspot {
background: #f90;
width: 10px;
height: 10px;
border-radius: 5px;
position: absolute;
cursor: pointer;
pointer-events: auto;
}

<div id="hotspotBox"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Answer 2

To halt the scaling process, it is essential to convert 3D positions to 2D using the Vector3.project() method. Refer to the code snippet below for details where I have highlighted key aspects in the JavaScript code. Here's a brief explanation:

Duplicate the 3D position of the hotspot into a new vector.
Utilize vector.project(camera) to translate the 3D point to 2D coordinates.
Adjust the range of 2D coords from [-1, 1] to [0, window.width]
Assign these coordinates through CSS to your hotspot element.

Bonus Tip: You can leverage the .z attribute of the 2D vector to identify whether it lies within the camera's frustum or not.

var camera, controls, scene, renderer;

// Initializing arrays for 3D positions and hotspot DIVs
var posArray3D = [];
var divArray = [];

// Creating temporary vector for reuse during loops
var tempVec = new THREE.Vector3();

init();
animate();

function init() {

// Setting up the scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.set( 400, 200, 0 );

// Initializing controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
// Additional control settings...

// Generating world elements
// Loop through random positioning...
 
window.addEventListener( 'resize', onWindowResize, false);

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

// Updating positions of all DIVs based on camera view
function updateDivs() {
var vectorScreen = new THREE.Vector3();

// Looping through all positions
for (var i = 0; i < posArray3D.length; i ++) {
vectorScreen.copy(worldToScreen(posArray3D[i], camera));

// Updating CSS attributes for each DIV
divArray[i].style.transform = "translate(" + vectorScreen.x + "px, " + vectorScreen.y + "px)";

// Checking depth, hiding if behind the camera
if(vectorScreen.z <= 1) {
divArray[i].style.display = "block";
} else {
divArray[i].style.display = "none";
}
}
}

// Projecting 3D coordinates to 2D space 
function worldToScreen(_position, _cam) {
tempVec.copy(_position);

tempVec.project(_cam);

// Converting range from [-1, 1] to [0, windowWidth]
tempVec.x = (   tempVec.x + 1 ) * window.innerWidth  / 2;
tempVec.y = ( - tempVec.y + 1 ) * window.innerHeight / 2;

return tempVec;
}

function animate() {

requestAnimationFrame( animate );

controls.update();
updateDivs();

render();

}

function render() {

renderer.render( scene, camera );

}

body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;

background-color: #fff;
margin: 0px;
overflow: hidden;
}
/*hotspotBox holds all .hotspots It's placed on top of WebGL canvas*/
#hotspotBox{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px dashed #f90;
pointer-events: none;
}
/*100 hotspots to be placed within #hotspotBox */
.hotspot {
background: #f90;
width: 10px;
height: 10px;
border-radius: 5px;
position: absolute;
cursor: pointer;
pointer-events: auto;
}

<div id="hotspotBox"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Answer 3

Answer №2

After exploring different approaches, I discovered that the most straightforward solution to my query is to utilize the CSS2DRenderer instead of the CSS3DRenderer.

The CSS2DRenderer essentially achieves the same result by only transforming the HTML element with translate, without the need for rotate or scale. This allows for easy modification of the size of HTML elements using CSS properties like width and size, which perfectly aligns with my requirements.

Implementing this change was seamless as it follows the exact same process, with the only adjustment being replacing CSS3DSprite with CSS2DObject in my code.

To delve deeper into the functionalities of CSS2DRenderer, check out the documentation here.

Answer 4

After exploring different approaches, I discovered that the most straightforward solution to my query is to utilize the CSS2DRenderer instead of the CSS3DRenderer.

The CSS2DRenderer essentially achieves the same result by only transforming the HTML element with translate, without the need for rotate or scale. This allows for easy modification of the size of HTML elements using CSS properties like width and size, which perfectly aligns with my requirements.

Implementing this change was seamless as it follows the exact same process, with the only adjustment being replacing CSS3DSprite with CSS2DObject in my code.

To delve deeper into the functionalities of CSS2DRenderer, check out the documentation here.

Prevent scaling in CSS3DRenderer

Answer №1

Answer №2

Similar questions

Incorporating sweetalert2 with the latest Bootstrap 4 framework

What is the best way to include various audio tracks from my array list?

Obtain directive content in AngularJS prior to compilation

Website experiences technical difficulties but database remains up-to-date

What is causing the data element to remain unchanged within a Vue.js function and what steps can be taken to ensure its value can be updated?

Unable to fetch permissions for user:email via GitHub API

Individual Ajax data

Display the child elements in an HTML document that have the same class name as the parent element, while concealing all

What are the best techniques for optimizing loops when inserting data into a database?

Secure your Express.js session cookies for enhanced protection

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

Switch the cursor to display the magnifying glass icon for zooming in and out

Exploring the world of unit testing in a store - any tips on getting it to work

Unable to locate the value of the query string

Node.JS displaying the asynchronous functionality with 'Promise' included in the returned data

Having issues with adding elements to an array object in JavaScript

What are the steps to access an Alexa skill through a web browser?

I am having trouble retrieving the properties of "2d" objects using tiles[i-1], unlike standard objects in JavaScript

Organize information by time intervals using JavaScript

Ways to dynamically update the value of an object property within reactJS state