Question

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

当我将画布可视化时，我在相机前面获得了背景色。在下面的截图中，我想摆脱矩形区域。

该应用程序在此处托管。

代码就在这里。

＆＃13;

 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);
 };

＆＃13;

<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>

＆＃13;

任何人都可以帮我解决问题。它应该显示背景图像。

感谢您的支持！

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中摆脱相机前的白色背景？

2 个答案: