THREE.js SphereGeometry DOMElements kullanarak panorama noktaları

Question

Bir SphereGeometry, ve CanvasTexture kullanarak basit bir WebGL 3D Panorama uygulaması oluşturdum. Şimdi, SphereGeometry'un belirli bölümleri üzerinde "HotSpots" ekleyerek sahneyi hayata geçirmeyi düşünüyorum. Sorun şu ki, DOMElements değişikliğinin nasıl güncelleneceğini anlamak, böylece konumlarının güncellenen Camera konumunun yansımasıdır. Temel olarak, Camera dönerken, çeşitli DOMElements, kameranın dönme yönüne göre içeri ve dışarı hareket edecektir. Ben döndü PerspectiveCameracamera.rotation kullanarak <div><canvas> için absolute ve translatingX ve Y pozisyon konumlandırma çalıştı ama gerçekten işe yaramadı;

#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 da istenen etkinin canlı örneğidir

CSS: İşte benim JS & CSS implentation bu.

Bu sorunu çözmek için en iyi çözüm ne olurdu? Bunu çalıştırdığımda, DOMElements'un yalnızca hafifçe hareket ettiğini fark ettim; Ben de SphereGeometry boyunca onlar (örneğin, "arkasında" konumlanarak yerleştirildi nereye onlar gerçekten hesapta almayacağını fark Camera;! Gerçekten karmaşık

Ben THREE.js motoru için herhangi bir eklenti kullanmak mutluyum

yanı sıra. herhangi öğreticiler takip önceden yanıtlarken için çok teşekkür ederiz!

Answer 1

1. deneyin istenen noktaya/bir planemesh set örgü için.
2. Kopyala css elemanları (üç ile oluşturulan domElements konumu. js cssObject [eğer zaten biliyorsanız]) planemesh/mesh'in pozisyonu ile birlikte.

Ve işiniz bitecek!

Answer 2

Tamam, kendi sorumu üzerinde kafa karıştırıyorum! Birkaç problemim vardı ama CSS3d'nin THREE.js WebGL sahneleriyle nasıl karıştığını anladım.

Yapmam gereken ilk şey, THREE.js kitaplığımı güncellemekti; Daha önceki bir yüklemeden 71'i çalıştırıyordum ama Mr.Doob'ın this örneğinde kullandığım kütüphaneye güncellemem gerekiyordu. Ayrıca CSS3d kitaplığımı da aynı örnekte bulunan dosyaya güncelleştirdim.

Daha sonra bir demo sahnesi oluşturmak için bu yöntemi (bağlantıda belirtilenle aynı) kullandım. O çalışma vardı sonra

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

} 

, ben CSS3d scene, CSS3d object ve CSS3d renderer benim sahnedeki dahil edilecek amaçlı yeniden.

Başkasına iyi şanslar dileriz ve umarım bu yardımcı olur!