THREE.js SphereGeometry Panoramic Hotspots Using DOMElements

Question

I created a simple WebGL 3D Panorama application using SphereGeometry , PerspectiveCamera and CanvasTexture . Now I want to liven up the scene by adding "HotSpots" to specific parts of SphereGeometry . The problem I am facing is understanding how to update various DOMElements so that their position reflects the updated position of Camera .

In principle, as the Camera rotates, various DOMElements will move and exit the view relative to the direction in which the camera rotates. I tried positioning the <div> absolute at the <canvas> position and translating X and Y using the returned PerspectiveCamera camera.rotation , but it really doesn't work; here is my js and css implantation:

CSS

 #TestHotSpot { /* not sure if using margins is the best method to position hotspot */ margin-top: 50px; margin-left: 50px; width: 50px; height: 50px; background: red; position: absolute; } 

Javascript

 /** CONFIG is my stored object variable; it contains the PerspectiveCamera instance code is being called inside of my RequestAnimationFrame **/ config.camera.updateProjectionMatrix(); config.controls.update(delta); document.getElementById("TestHotSpot").style.transform = "translate("+ config.camera.rotation.x +"px, "+ config.camera.rotation.y +"px)"; 

It is also a living example of the desired effect.

What would be the best solution to solve this problem? What I noticed when I ran this is that DOMElements will only move slightly; I also noticed that they will not take into account where they were placed on SphereGeometry (for example, they are positioned “behind” Camera , which are really complicated!

I am happy to use any plugins for the THREE.js engine, as well as follow any tutorials. Thank you so much for your reply in advance!

Answer 1

• Try setting planemesh / mesh to the desired point.
• Copy the position of the css elements (domElements created using the three-digit cssObject [if you already know]) along with the position of the planemesh / mesh.

And you are done !!

Answer 2

Well, poking fun at my own question! I had a few problems, but I figured out how to get CSS3d to move in THREE.js WebGL scripts.

So, the first thing I needed to do was update my THREE.js library; I ran 71 from an earlier download, but I needed to update it in the library. Mr.Doob used an example in this . I also updated my CSS3d library to the file included in the same example.

Then I used this method (the same one that is listed in the link) to create 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 ); } 

After I had this work, I reassigned the CSS3d scene , CSS3d object and CSS3d renderer to be included in my scene.

Good luck to someone else and hopefully this helps!