THREE.js SphereGeometry Panorama hotspot za pomocą DOMElements

Question

Stworzyłem prostą aplikację WebGL 3D Panorama przy użyciu SphereGeometry, PerspectiveCamera i CanvasTexture. Teraz chciałbym ożywić scenę, dodając "HotSpots" nad niektórymi częściami SphereGeometry. Problemem, który mam, jest zrozumienie, jak zaktualizować różne DOMElements, tak aby ich pozycja odzwierciedlała zaktualizowaną pozycję .

W zasadzie, gdy obraca się Camera, różne DOMElements będą się przemieszczać i oddalać w stosunku do kierunku, w którym kamera się obraca. Próbowałem umieszczenie <div>absolute do <canvas> i translating położeniu X i Y pomocą zwrócony PerspectiveCameracamera.rotation ale to naprawdę nie działa; oto mój JS & CSS implentation:

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 jest także żywo przykładem pożądanego efektu.

Jakie byłoby najlepsze rozwiązanie, aby rozwiązać ten problem? To, co zauważyłem, gdy to uruchomiłem, że DOMElements tylko nieznacznie się poruszy; Zauważyłem również, że nie będzie naprawdę uwzględniające gdzie wzdłuż SphereGeometry umieszczano je (na przykład, są umieszczone „za” Camera;! Naprawdę kompleks

Cieszę się używać żadnych wtyczek dla silnika THREE.js a także śledzić tutoriale. Dziękuję bardzo za odpowiedzi z góry!

Answer 1

1. Spróbuj ustawić planemesh/siatki do żądanego punktu.
2. Skopiuj położenie elementów cSS (domElements utworzone z trzech. js cssObject [jeśli już wiesz]) wraz z planemesh/pozycji siatki.

I skończysz !!

Answer 2

Okay, dzwoniąc na własne pytanie! Miałem kilka problemów, ale doszedłem do wniosku, jak zmieszać CSS3d ze scenami WebGL THREE.js.

Pierwszą rzeczą, którą musiałem zrobić, to zaktualizować moją bibliotekę THREE.js; Byłem uruchomiony 71 z wcześniejszego pobrania, ale musiałem zaktualizować go do biblioteki Mr.Doob był przy użyciu przykładu this. Zaktualizowałem również moją bibliotekę CSS3d do pliku zawartego w tym samym przykładzie.

Potem użyłem tej metody (tej samej, podanej w linku), aby utworzyć scenę 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); 

} 

Po miałem, że praca, ja ponownie przeznaczona CSS3d scene, CSS3d object i CSS3d renderer mają być zawarte w moim sceny.

Powodzenia dla każdego innego i mam nadzieję, że to pomoże!