Three.js - CSS3D에서 렌더링 한 DIV를 전체 화면

Question

의 실험실에서 three.js 라이브러리를 사용하여 만들면 두 개의 서로 다른 장면 (하나의 캔버스 렌더링, 하나의 css3d 렌더링)을 동일한 설정으로 표시 할 수있었습니다. 원근 카메라.

참고 : IE 10을 사용하고 있습니다.

캔버스 렌더링 장면의 개체가 회전되고 많이 이동되는 동안 css3d 장면은 이미지가 포함 된 하위 DIV가 포함 된 단일 DIV 요소로만 구성됩니다. css3d 렌더링 된 DIV는 어떤 창 크기에 상관없이 (거의) 전체 화면을 보여야합니다. DIV의 z 축 좌표로 작업하면 크기가 커지지 않으므로 크기를 조정하면 더 크게 만들 수 있습니다. 그러나 서로 다른 창 크기에 대해 서로 다른 크기 조정 요소가 최적의 결과를 제공합니다.

그러나 렌더링 된 객체를 더 크게 또는 더 작게 만들기 위해 원래 div의 높이와 너비도 조작 할 수 있다는 것을 알았습니다. 내부의 이미지는 div처럼 쉽게 조작 할 수 있기 때문에이 방법을 스케일링보다 선호합니다.

그러나 DIV가 장면 내에서 전체 화면으로 렌더링되도록 픽셀의 정확한 양을 계산할 능력이 없습니다. 여기에 지금까지 가지고 무엇

...

<style> 
     body { 
      background-color: #000000; 
      margin: 0px; 
      overflow: hidden; 
     } 
     .element { 
      width: 1000px; 
      height: 750px; 
      box-shadow: 0px 0px 20px rgba(0,255,255,0.5); 
      border: 1px solid rgba(127,255,255,0.25); 
      cursor: default; 
     } 
     .element .profile { 
      position: absolute; 
      top: 2.5%; 
      left: 2.5%; 
      width: 95%; 
      height: 95%; 
      background-image:url('profile.jpg'); 
      background-size: 100% auto; 
      color: rgba(127,255,255,0.75); 
     } 
    </style> 
... 

      camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 3000); 
      camera.position.z = 1000; 

... initialize a lot of particles (that work just fine in their scene with the camera setting above) 
      renderer = new THREE.CanvasRenderer(); 
      renderer.setClearColor(0x000000, 1); 
      renderer.setSize(window.innerWidth, window.innerHeight); 

    ... 

// now: create the css rendered scene, create and configure DIV, add the DIV to scene 

      var element = document.createElement('div'); 
      element.className = 'element'; 
      element.style.width = window.innerWidth + 'px'; 
      element.style.height = window.innerHeight + 'px'; 
      element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')'; 
      var profile = document.createElement('div'); 
      profile.className = 'profile'; 
      profile.textContent = ""; 

      if (imgArray != undefined) { 
       if (imgArray.length > 0) { 
       profile.style.backgroundImage = 'url(' + imgNameArray[0] + ')'; 
       profile.style.backgroundSize = "100% auto"; 
       } 
      } 

      element.appendChild(profile); 
      myimgdiv = new THREE.CSS3DObject(element); 
      myimgdiv.position.x = 0; 
      myimgdiv.position.y = 0; 
      myimgdiv.position.z = 0; 
      scene2.add(myimgdiv); 

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

    ... 

     function animate() { 
      requestAnimationFrame(animate); 
      render(); 
     } 
     function render() { 
      TWEEN.update(); 
      camera.lookAt(scene.position); 
      renderer.render(scene, camera); 
      renderer2.render(scene2, camera); 
     } 

누군가가 내게는 위의 설정에서 전체 화면으로 보이게하기 위해 "요소"의 정확한 폭과 높이 값을 계산하는 데 도움이 바랍니다 수 있습니까?

는 화면 상단에 위치를 설정하는 것을 시도했다

올리버

Answer 1

, 사전에 대단히 감사? x_pos = 0; y_pos = 0;