THREE.js SphereGeometry Hotspot Panorama con DOMElements

Question

Ho creato una semplice applicazione Panorama 3D WebGL utilizzando un , PerspectiveCamera e un CanvasTexture. Ora, sto cercando di dare vita alla scena aggiungendo "HotSpots" su alcune parti dello SphereGeometry. Il problema che sto riscontrando è capire come aggiornare i vari DOMElements in modo che la loro posizione rifletta la posizione aggiornata di Camera.

Fondamentalmente, mentre il Camera ruota, i vari DOMElements si spostano dentro e fuori dalla vista rispetto alla direzione della rotazione della videocamera. Ho provato il posizionamento di una <div>absolute al <canvas> e translating la posizione X e Y utilizzando il restituita PerspectiveCameracamera.rotation ma non funzionava; ecco la mia JS & implentation CSS:

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)"; 

Here è anche un esempio dal vivo l'effetto desiderato.

Quale sarebbe la soluzione migliore per risolvere questo problema? Quello che ho notato durante l'esecuzione è che lo DOMElements si sposta solo leggermente; Ho anche notato che non avrebbero davvero prendere in considerazione dove lungo la SphereGeometry sono stati collocati (per esempio, essere posizionato "dietro" il Camera;! Molto complesso

Sono felice di utilizzare alcun plugin per il motore THREE.js così come seguire dei tutorial. Grazie mille per la risposta in anticipo!

Answer 1

1. tenta di impostare un planemesh/maglia al punto desiderato.
2. Copiare la posizione degli elementi di CSS (domElements creati con tre. js cssObject [se lo sai già]) insieme alla posizione di planemesh/mesh

E si sarà fatto !!

Answer 2

Okay, intervenendo sulla mia stessa domanda! Ho avuto alcuni problemi, ma ho capito come far interagire CSS3d con le scene WebGL di THREE.js.

Quindi la prima cosa che dovevo fare era aggiornare la mia libreria THREE.js; Stavo eseguendo 71 da un download precedente ma avevo bisogno di aggiornarlo alla libreria che Mr.Doob stava usando nell'esempio this. Ho anche aggiornato la mia libreria CSS3d al file incluso nello stesso esempio.

Ho quindi utilizzato questo metodo (lo stesso specificato nel collegamento) per creare una scena demo.

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); 

} 

Dopo che ho avuto che il lavoro, ho ri-proposi il CSS3d scene, CSS3d object e il CSS3d renderer da inserire nella mia scena.

Buona fortuna a chiunque altro e spero che questo aiuti!