Utilize HTML elements alongside OrbitControls to create a dynamic rotation effect that synchronizes with the objects in the scene

In my Three.js scene, I have a globe with an Earth texture that can be rotated using OrbitControls. I am looking to add labels that remain in a fixed position on the globe, such as an "Australia" label pinned to the centre of Australia's Latitude & Longitude. The labels need to be HTML elements for easier content management and styling.

After studying an example (https://www.gsmlondon.ac.uk/global-oil-map/#1995-exporters), which features a similar setup with Three.js globe and HTML labels, I am trying to replicate the functionality where the labels stay above their respective countries even when the globe is rotated.

I have successfully translated Latitude & Longitude coordinates into X, Y, Z coordinates for my scene using a calculation function. However, I am struggling to make the HTML elements rotate along with the globe. My attempted code to rotate the elements on the X axis within the render loop is not working as expected.

If anyone has insight on how to achieve the desired effect of keeping the HTML elements always positioned correctly above their designated locations regardless of scene rotation, I would greatly appreciate it.

Thank you.

javascriptthree.js

Answer №1

If you're looking to implement 3D transformations on your HTML elements, Three.js offers a handy tool known as CSS3DRenderer. An illustrative example of this can be seen in action by visiting this link.

Utilizing this converter would significantly streamline the process for you, eliminating the need for manual determination of element positions and rotations:

var scene = new THREE.Scene();
var sceneCSS = new THREE.Scene();

// Integrate CSS3DObjects into your scene:
var object = new THREE.CSS3DObject( HTMLElement );
sceneCSS.add(object);

var renderer = new THREE.WebGLRenderer();
var rendererCSS = new THREE.CSS3DRenderer();

var camera = new THREE.PerspectiveCamera();

onUpdate() {
    // Rendering your WebGL 3D Scene
    renderer.render(scene, camera);

    // Applying 3DTransforms to your HTML elements
    rendererCSS.render(sceneCSS, camera);
}

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

Performing an Ajax MySQL query utilizing the text from a link as a reference, across a page

I have a page with several links. When a user clicks on a link, the text from the link is used in the WHERE clause of a MySQL query, and the result is displayed on the page using ajax. I'm trying to run different queries based on multiple ids or clas ...

javascriptphpmysqlajax

Blending Buffers or another approach

How can I resize an image screenshot from the webshot module in memory without saving it to disk? Here is my current code: var webshot = require('webshot'); var fs = require('fs'); var sharp = require('sharp'); alldata ...

javascriptnode.jsexpress

Experimenting with a custom AngularJS filter designed to extract numerical values from a chunk of text

I am working on creating a unique filter that can extract numbers from text input into a text box. For example: User enters: The cat went to 4 stores and bought 3 bags of cat litter for 1 dollar. The desired output would be: [4, 3, 1] This filter works ...

javascriptangularjs

Tips for connecting an input tag within a popover to a Vue Model

I've got an input nested inside a popover content as shown below: JSFiddle Link HTML code snippet: <div id="vue-app"> <div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true" data ...

javascriptjquerytwitter-bootstrapvue.jsvuejs2

What is the best way to fetch information from an API using Angular5 with Material2 components?

Here are the 'table.component.html' and 'table.component.ts' files where I am pulling data from an API to display in a table. Below is the object received from the API: [ {position: 1, name: 'Hydrogen', weight: 1.0079, sym ...

javascriptangularangular-materialangular-material2

Preventing the use of double-click on Grooveshark

I am currently in the process of creating a webpage to serve as a jukebox for parties. My goal is to have the page load Grooveshark with a transparent overlay (or any other necessary method) that can prevent users from forcefully adding their song to the f ...

javascripthtmloverlay

What steps should I take to rename the image file?

Angularjs app.directive('fileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; ...

javascriptangularjshtmlimage-processingangularjs-directive

Merging a generator of unpredictable quotes with a simulated typewriter effect

Recently, I've been experimenting with a project involving a random quote generator and wanted to add a typewriter-style animation when the generator displays a new quote. The challenge is that my knowledge of JavaScript is quite limited, making it di ...

javascripthtmljquery

Is the purpose of express.json() to identify the Request Object as a JSON Object?

app.js const express = require('express'); const cookieParser = require('cookie-parser'); const session = require('express-session'); const helloRouter = require('./routes/hello'); const app = express(); app.set(& ...

javascriptnode.jsexpress

Sweetalert not functioning properly when deleting records from Datatable

I am currently working on a CRM script and encountering an issue. The customers are stored in a data table, and I am trying to implement a delete function with confirmation from both the database and the data table. I have written some code and placed it w ...

javascriptphphtmldatatablesweetalert2

Retrieve the chosen identification from a dropdown menu (select box) with jQuery

I've been on a quest to find a solution for extracting the id from a selected option in a dropdown list. After extensive research, I stumbled upon this helpful resource: Get selected text from a drop-down list (select box) using jQuery I attempted t ...

javascriptjquery

Chrome experiencing conflicts with backstretch when using multiple background images

In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field. Everything is functioning properly for the body's background image. However, there seems to be an issue with anot ...

javascriptjqueryhtmlcssgoogle-chrome

What is the process for showing a duplicate image in a dialog box once it has been selected on an HTML page?

I am experiencing an issue where the dialog box is displaying when I use the button tag, but not when I use the image tag. Can someone please assist? <img src='image.png' height='200px' widht='200px' id='1'> ...

javascriptjqueryhtmlimage

Is there a way to alter a class using ng-class only when the form is deemed valid?

I am trying to implement a feature where an input field shows as required, but once the user enters text, it indicates that the input is valid by changing the border color from red to green. I am facing an issue with this line of code always returning fal ...

javascripthtmlcssangularjs

What is the process for monitoring a property in Angular?

Seeking clarification on Angular - is it possible to detect property value changes within the same class? import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', ...

javascriptangularproperties

Utilizing jQuery to implement a function on every individual row within a table

I have a collection of objects that requires applying a function to each item, along with logging the corresponding name and id. Below is the snippet of my code: var userJson = [ { id: 1, name: "Jon", age: 20 }, { ...

javascriptjquery

Error in Mathquill: Unable to access the 'prototype' property because it is undefined

I'm currently in the process of integrating MathQuill into a project I'm developing. After installing the package through NPM (npm install mathquill), I included the following <script> tags in the <head>: <script src="../node_ ...

javascriptnpmelectronmathquill

How can I use node.js to send an API response in the body?

I have successfully implemented an API that is providing the desired response. However, I am now looking to set this response directly into the body section. Currently, the response is being displayed within a <pre> tag on the website as shown below ...

javascriptjsonnode.jsapi

Displaying selected list item while concealing the original

I have a dropdown menu with several options. What I am looking for is to have it so that when we click on the drop down, a list of choices appears. Then, when we select an option from the dropdown, the original selection should be replaced with the one th ...

javascriptjqueryhtmlcss

Using THREE.js to pass an array of vec2 to a shader

I've spent quite some time browsing the internet but haven't found the right solution yet. I came across a list of uniform types used by THREE.js and believe the code below should be accurate. I'm defining a uniform array of Vector2 at the ...

javascriptarraysthree.jsglslshader