Three.js - 立方体和球体与平面奇怪地剪裁

Posted 2023-03-23

【中文标题】Three.js - 立方体和球体与平面奇怪地剪裁

【英文标题】：Three.js - Cube and sphere clipping strangely with plane

【发布时间】：2013-03-29 22:34:31

【问题描述】：

我遇到了一个问题，立方体和球体似乎与平面剪裁。当我将立方体（使用键盘）移向场景后面时，似乎会发生这种情况。当我使用轨迹球控件在场景中移动时也会发生这种情况。有时即使我转动相机也能看到立方体和球体，所以我正在看飞机的底部。

一些可能有用的代码，包含相机变量、平面、球体和立方体的创建。我也有图片：http://imgur.com/0VlZLmP

//CAMERA
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 20000;

//Renderer
ShapeShifter.renderer = new THREE.CanvasRenderer();

//Sphere
var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 );
var sphereMaterial = new THREE.MeshLambertMaterial(  color: 0x8888FF, overdraw: true  );
ShapeShifter.sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
ShapeShifter.sphere.position.set( 100, 50, -10 );
ShapeShifter.scene.add( ShapeShifter.sphere );

//Cube
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50 );
var cubeMaterial = new THREE.MeshBasicMaterial(  color: 0xFF4422  );
ShapeShifter.cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
ShapeShifter.scene.add( ShapeShifter.cube );
ShapeShifter.cube.position.set( -40, 50, 200 );

//Floor
var floorGeometry = new THREE.PlaneGeometry( 1000, 1000 );
var floorMaterial = new THREE.MeshBasicMaterial(  color: 0x4DBD33, overdraw: true  );
ShapeShifter.floor = new THREE.Mesh( floorGeometry, floorMaterial );
ShapeShifter.floor.material.side = THREE.DoubleSide;
ShapeShifter.floor.position.y = 0;
ShapeShifter.floor.rotation.x = Math.PI / 2;
ShapeShifter.scene.add( ShapeShifter.floor );

【参考方案1】：

这是CanvasRenderer 的已知限制。

您可以通过增加几何图形（尤其是平面）的细分来减少这些伪影。

var floorGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 ); // will help
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50, 2, 2, 2 );  // may help