three.js 如何消除相机前的白色背景？

Question

使用 three.js 库，我创建了一个简单的立方体背景并在其中加载了模型。

当我想象 canvas 时，我在镜头前获得了背景颜色。在下面的屏幕截图中，我想摆脱矩形区域。

应用程序托管在这里。

代码在此处。

 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>

谁能帮我解决这个问题。它应该显示背景图像。

感谢您的支持！

Answer 1

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

我改成

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

它消失了。

Answer 2

您看到背景是因为相机设置以 1000 个单位裁剪。

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

上面的行将视图剪裁为低于 0.1 和高于 1000 单位的任何内容，因此您可以将立方体大小减小到 1000 以下，或者将相机中的 1000 增加到大于 2000 的值。

three.js 如何消除相机前的白色背景？

How to rid out white background in front of camera in three.js?

three.js