Creating interactive panorama hotspots with THREE.js SphereGeometry and DOMElements

Question

Creating interactive panorama hotspots with THREE.js SphereGeometry and DOMElements

After creating a WebGL 3D Panorama application using a SphereGeometry, PerspectiveCamera, and CanvasTexture, I am now trying to enhance the scene by adding "HotSpots" over specific areas of the SphereGeometry. However, I am facing difficulty in updating the positions of various DOMElements based on the Camera's movement.

As the Camera rotates, I want the DOMElements to move in and out of view according to the camera's spin direction. My attempts at positioning a div absolutely to the canvas and translating its X and Y positions using the PerspectiveCamera's rotation property did not yield desired results. Here is my implementation in JavaScript and CSS:

CSS

#TestHotSpot {
    margin-top: 50px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
}

JavaScript

/** 
   CONFIG is a stored object variable that contains the PerspectiveCamera instance
**/

config.camera.updateProjectionMatrix();
config.controls.update(delta);

document.getElementById("TestHotSpot").style.transform = "translate("+ config.camera.rotation.x +"px, "+ config.camera.rotation.y +"px)";

Here is an example demonstrating the desired effect live.

I am seeking the best solution to resolve this issue. When testing my code, I noticed that the DOMElements moved only slightly and did not consider their placement relative to the SphereGeometry (e.g., if they were positioned behind the Camera). Any recommendations for resolving this complexity are appreciated!

I am open to utilizing plugins for the THREE.js engine or following tutorials. Thank you in advance for your assistance!

javascript css three.js

Answer 1

Answer №1

Start by positioning a planemesh/mesh at the desired location.
Take note of the coordinates of the CSS elements (domElements generated with three.js cssObject [if applicable]) in addition to the position of the planemesh/mesh.

Follow these steps and your task will be complete!

Answer 2

Start by positioning a planemesh/mesh at the desired location.
Take note of the coordinates of the CSS elements (domElements generated with three.js cssObject [if applicable]) in addition to the position of the planemesh/mesh.

Follow these steps and your task will be complete!

Answer 3

Answer №2

Joining in on my own query! I encountered some hurdles, but I have successfully integrated CSS3d with THREE.js WebGL scenes.

To start, I needed to update my THREE.js Library; I was using version 71 from an earlier download, but it was necessary to switch to the library Mr.Doob utilized in this demonstration. Additionally, I updated my CSS3d library to match the file included in that same example.

Subsequently, I followed the method outlined in the provided link to construct a demo scene.

var camera, scene, renderer;

var scene2, renderer2;

var controls;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 200, 200, 200 );

    controls = new THREE.TrackballControls( camera );

    scene = new THREE.Scene();
    scene2 = new THREE.Scene();

    var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );

            //

    for ( var i = 0; i < 10; i ++ ) {

        var element = document.createElement( 'div' );
            element.style.width = '100px';
            element.style.height = '100px';
            element.style.opacity = 0.5;
            element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();

        var object = new THREE.CSS3DObject( element );
            object.position.x = Math.random() * 200 - 100;
            object.position.y = Math.random() * 200 - 100;
            object.position.z = Math.random() * 200 - 100;
            object.rotation.x = Math.random();
            object.rotation.y = Math.random();
            object.rotation.z = Math.random();
            object.scale.x = Math.random() + 0.5;
            object.scale.y = Math.random() + 0.5;
        scene2.add( object );

        var geometry = new THREE.PlaneGeometry( 100, 100 );
        var mesh = new THREE.Mesh( geometry, material );
            mesh.position.copy( object.position );
            mesh.rotation.copy( object.rotation );
            mesh.scale.copy( object.scale );
        scene.add( mesh );

    }

            //

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xf0f0f0 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    renderer2 = new THREE.CSS3DRenderer();
    renderer2.setSize( window.innerWidth, window.innerHeight );
    renderer2.domElement.style.position = 'absolute';
    renderer2.domElement.style.top = 0;
    document.body.appendChild( renderer2.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    controls.update();

    renderer.render( scene, camera );
    renderer2.render( scene2, camera );

}

Once I had that functioning, I repurposed the CSS3d scene, CSS3d object, and the CSS3d renderer to include them in my scene.

Best of luck to others facing similar challenges, and may this offer assistance!

Answer 4

Joining in on my own query! I encountered some hurdles, but I have successfully integrated CSS3d with THREE.js WebGL scenes.

To start, I needed to update my THREE.js Library; I was using version 71 from an earlier download, but it was necessary to switch to the library Mr.Doob utilized in this demonstration. Additionally, I updated my CSS3d library to match the file included in that same example.

Subsequently, I followed the method outlined in the provided link to construct a demo scene.

var camera, scene, renderer;

var scene2, renderer2;

var controls;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 200, 200, 200 );

    controls = new THREE.TrackballControls( camera );

    scene = new THREE.Scene();
    scene2 = new THREE.Scene();

    var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );

            //

    for ( var i = 0; i < 10; i ++ ) {

        var element = document.createElement( 'div' );
            element.style.width = '100px';
            element.style.height = '100px';
            element.style.opacity = 0.5;
            element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();

        var object = new THREE.CSS3DObject( element );
            object.position.x = Math.random() * 200 - 100;
            object.position.y = Math.random() * 200 - 100;
            object.position.z = Math.random() * 200 - 100;
            object.rotation.x = Math.random();
            object.rotation.y = Math.random();
            object.rotation.z = Math.random();
            object.scale.x = Math.random() + 0.5;
            object.scale.y = Math.random() + 0.5;
        scene2.add( object );

        var geometry = new THREE.PlaneGeometry( 100, 100 );
        var mesh = new THREE.Mesh( geometry, material );
            mesh.position.copy( object.position );
            mesh.rotation.copy( object.rotation );
            mesh.scale.copy( object.scale );
        scene.add( mesh );

    }

            //

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xf0f0f0 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    renderer2 = new THREE.CSS3DRenderer();
    renderer2.setSize( window.innerWidth, window.innerHeight );
    renderer2.domElement.style.position = 'absolute';
    renderer2.domElement.style.top = 0;
    document.body.appendChild( renderer2.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    controls.update();

    renderer.render( scene, camera );
    renderer2.render( scene2, camera );

}

Once I had that functioning, I repurposed the CSS3d scene, CSS3d object, and the CSS3d renderer to include them in my scene.

Best of luck to others facing similar challenges, and may this offer assistance!

Creating interactive panorama hotspots with THREE.js SphereGeometry and DOMElements

Answer №1

Answer №2

Similar questions

Developing a new class within a function

I keep encountering an error that says "ReferenceError: localStorage is not defined" even though I have already included the "use

What methods can be used to perform unit testing on a controller within an AngularJS Directive?

While making a promise, an error occurred: TypeError - Unable to access the property '0' of null

Is there a way to share another person's contact card using whatsapp-web.js?

Ways to prevent mouse selection in an input field without disabling or making it read-only

Tips for displaying a dropdown on top of a modal with the help of Tailwind CSS

Stop the page from scrolling when scrolling within a specific DIV to address the [Violation] warning appearing in the console

Switching between nested lists with a button: A simple guide

Textfield with autocomplete dropdown

How to display two elements side by side within a div using React

How can HTML and CSS be linked to display images independently?

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

Updating the style of different input elements using Angular's dynamic CSS properties

In the middle of one div, there are two additional divs positioned nearby

Guide on effectively sending a secondary parameter in an ajax request

Sustain unbroken websocket connection with Discord using Node.js

Is it possible to have two large text areas situated next to each other, taking up the entire width of the website like in Sublime Text editor, and arranged

The alert message fails to appear during an Ajax request

The MongoDB .push operation is returning a null value