關於在three.js中呈現黑屏的渲染

即使主體背景顏色爲＃135462，下面的代碼也會顯示黑屏。我正在考慮由於渲染代碼而顯示黑屏。但無法刪除黑屏並獲取背景顏色。關於在three.js中呈現黑屏的渲染

對象也沒有顯示在屏幕上。我的對象鏈接可以在這裏找到：https://www.dropbox.com/s/ukw7k1vyqkg4f7d/SupermanSmall.json?dl=0

任何人有任何想法，爲什麼發生這種情況？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>My three.js</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       background:#135462; 
       color:#fff; 
       padding:0; 
       margin:0; 
       overflow:hidden; 
       font-family:georgia; 
       text-align:center; 
      } 


     </style> 
    </head> 

    <body>   

      <script src="js/three.min.js"></script> 
      <script src="js/loaders/BinaryLoader.js"></script> 

      <script src="js/loaders/ObjectLoader.js"></script> 
      <script src="js/Detector.js"></script> 

      <script> 
      if (! Detector.webgl) Detector.addGetWebGLMessage(); 

         var container; 
      var camera, scene, renderer; 

      var windowHalfX = window.innerWidth/2; 
      var windowHalfY = window.innerHeight/2; 

      init(); 
      animate(); 

      function init() { 
       container = document.createElement('div'); 
       document.body.appendChild(container); 

       camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 10000); 
       camera.position.z = 5; 

       scene = new THREE.Scene(); 
       scene.add(camera); 

       var loader = new THREE.ObjectLoader(); 
       loader.load("obj/superman/SupermanSmall.json", function(obj){ 

       scene.add(obj); 

       }); 

       renderer = new THREE.WebGLRenderer(); 
       renderer.setPixelRatio(window.devicePixelRatio); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       container.appendChild(renderer.domElement); 



      } 

      function animate() { 

        requestAnimationFrame(animate); 
        camera.lookAt(scene.position); 

        renderer.render(scene, camera); 

      } 

      </script> 

    </body> 
</html>

來源

2015-03-19 kiran

看看JavaScript控制檯消息。那裏有錯誤嗎？ – gaitat 2015-03-21 15:12:07

@ gaitat：「THREE.WebGLRenderer」「70」three.min.js：513：51 Not well-formed SupermanSmall.json：1：1 TypeError：THREE [a.type]不是構造函數three.min。 JS：274：292。這是我在控制檯中的。 – kiran 2015-03-24 07:17:18

這就是爲什麼你會得到黑屏。因爲你的代碼有錯誤。 – gaitat 2015-03-24 14:22:33

我猜測，一旦你解決了你的錯誤，你可能仍然有一個黑屏。嘗試添加下列內容：

renderer.setClearColor(0xEEEEEE);

或者您想要放在那裏的顏色。

renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

這應該改變你的背景顏色：如果你願意，你也可以做到這一點。

來源

2015-11-10 16:24:48

另一種解決方案是將renderer的alpha屬性設置爲true。這將允許透明度，以顯示你在CSS定義的背景，即：

CSS

body { 
    background: linear-gradient(#e4e0ba, #f7d9aa); 
    margin: 0px; 
    overflow: hidden; 
}

的Javascript

// Create the renderer 
renderer = new THREE.WebGLRenderer({ alpha: true }); 
renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setPixelRatio(window.devicePixelRatio); 
document.body.appendChild(renderer.domElement);

來源

2016-08-24 22:17:02 Matteo

關於在three.js中呈現黑屏的渲染

回答

相關問題