如何擺脫three.js在相機前面的白色背景？

使用three.js庫，我創建了一個簡單的多維數據集背景並在其中加載模型。如何擺脫three.js在相機前面的白色背景？

當我可視化畫布時，我在相機前獲得背景顏色。在下面的截圖中，我想擺脫矩形區域。

該應用程序託管在這裏。

的代碼放在這裏。

var WIDTH, HEIGHT, selectionBox, camera, scene, projector, container; 
 

 

 
WIDTH = window.innerWidth; 
 
HEIGHT = window.innerHeight; 
 

 
container = document.getElementById("container"); 
 

 
scene = new THREE.Scene(); 
 

 
camera = new THREE.PerspectiveCamera(75, WIDTH/HEIGHT, 0.1, 1000); 
 

 
scene.add(new THREE.GridHelper(500, 10)); 
 

 
renderer = new THREE.WebGLRenderer({ 
 
    alpha: true, 
 
    antialias: true, 
 
    preserveDrawingBuffer: true 
 
}); 
 

 
renderer.setSize(WIDTH, HEIGHT); 
 
//renderer.setClearColor(0xff0000); 
 

 
container.appendChild(renderer.domElement); 
 

 
window.addEventListener('resize', onWindowResize, false); 
 

 
controls = new THREE.OrbitControls(camera, renderer.domElement); 
 
controls.target.z = 150; 
 

 
render(); 
 

 
cubemap("Cloud"); 
 

 
function onWindowResize() { 
 

 
    camera.aspect = WIDTH/HEIGHT; 
 
    camera.updateProjectionMatrix(); 
 

 
    renderer.setSize(WIDTH, HEIGHT); 
 
} 
 

 

 
function render() { 
 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 
 
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
 
    window.requestAnimationFrame = requestAnimationFrame; 
 
    requestAnimationFrame(render); 
 
    controls.update(); 
 
    renderer.render(scene, camera); 
 
}; 
 

 
function cubemap(imagename) { 
 

 
    var urls = [ 
 
    imagename + "-BACK.jpg", 
 
    imagename + "-FRONT.jpg", 
 
    imagename + "-TOP.jpg", 
 
    imagename + "-BOTTOM.jpg", 
 
    imagename + "-RIGHT.jpg", 
 
    imagename + "-LEFT.jpg" 
 
    ]; 
 
    var cubemap; 
 
    cubemap = THREE.ImageUtils.loadTextureCube(urls); 
 
    cubemap.format = THREE.RGBFormat; 
 

 
    var shader = THREE.ShaderLib["cube"]; 
 
    shader.uniforms["tCube"].value = cubemap; 
 

 
    var skyBoxMaterial = new THREE.ShaderMaterial({ 
 
    fragmentShader: shader.fragmentShader, 
 
    vertexShader: shader.vertexShader, 
 
    uniforms: shader.uniforms, 
 
    depthWrite: false, 
 
    side: THREE.BackSide 
 
    }); 
 

 
    var skybox = new THREE.Mesh(
 
    new THREE.CubeGeometry(2000, 2000, 2000), 
 
    skyBoxMaterial 
 
    ); 
 
    skybox.position.set(0, -50, 0); 
 
    skybox.name = "ROOFTOP"; 
 
    //skybox.scale.set(30, 30, 30); 
 
    scene.add(skybox); 
 
};

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script> 
 
<script src="https://cdn.rawgit.com/mrdoob/three.js/a72347515fa34e892f7a9bfa66a34fdc0df55954/examples/js/controls/OrbitControls.js"></script> 
 

 

 
<div id="container"> 
 

 
</div>

誰能幫我解決這個問題。它應該顯示背景圖像。

感謝您的支持！

來源

2015-03-02 Premkumar Jayaseelan

您正在看到背景，因爲相機設置以1000單位裁剪。

camera = new THREE.PerspectiveCamera(75, WIDTH/HEIGHT, 0.1, 1000);

上述行削波低於0.1和高於1000個單位視圖任何東西，所以無論是您減少立方體尺寸至低於1000或增加1000在照相機爲值大於2000。

來源

2015-03-02 10:39:25 mtsandeep

Hi @mtsandeep，感謝您的解答和解釋。它解決了我的問題。 – 2015-03-02 10:54:04

var skybox = new THREE.Mesh(
    new THREE.CubeGeometry(2000, 2000, 2000), 
    skyBoxMaterial 
    );

我改變

var skybox = new THREE.Mesh(
    new THREE.CubeGeometry(800, 800, 800), 
    skyBoxMaterial 
    );

它消失。

來源

2015-03-02 10:22:37

當我們減少立方體幾何尺寸，它正在消失。但是，當你縮小同樣的問題發生。另外，我需要一個1500到2000的大立方體幾何（大環境）。 – 2015-03-02 10:36:09

如何擺脫three.js在相機前面的白色背景？

回答

相關問題