Three.js - 在我使用three.js庫的實驗中，使全屏幕

Question

中的CSS3D呈現的DIV顯示，我設法設置了兩個不同的場景（一個畫布渲染，一個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;