我可以在三.js物体上看到线条，即使线框是关闭的

Question

https://gyazo.com/7ea04fad47507a06fe7d38afbc58562b 我可以在这个黑匣子上看到这些奇怪的白线(请注意，这两个黑匣子都是黑匣子。 这很奇怪，我从未指定我的代码来执行此操作。有什么方法可以关闭它吗？这很烦人。 我的代码(它是 Three.JS + Cannon.JS 由谁制作它的示例，但它被修改了(：

var world, mass, body, shape, timeStep=1/60,
camera, scene, renderer, geometry, material, mesh;
initThree();
initCannon();
animate();
function initCannon() {
world = new CANNON.World();
world.gravity.set(0,0,0);
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10;
shape = new CANNON.Box(new CANNON.Vec3(1,1,1));
mass = 1;
body = new CANNON.Body({
mass: 1
});
body.addShape(shape);
body.angularVelocity.set(0,10,0);
body.angularDamping = 0.5;
world.addBody(body);
}
function initThree() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );
camera.position.z = 5;
scene.add( camera );
geometry = new THREE.BoxGeometry( 2, 2, 2 );
material = new THREE.MeshPhongMaterial( {shininess:0, color: 0xffffff } );
mesh = new THREE.Mesh( geometry, material );
geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
material2 = new THREE.MeshPhongMaterial( {shininess:0, color: 0xff0000 } );
mesh2 = new THREE.Mesh( geometry2, material2 );
mesh2.position.y = 2;
scene.add( mesh );
scene.add( mesh2 );
renderer = new THREE.CanvasRenderer({ alpha:true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
updatePhysics();
render();
}
function updatePhysics() {
// Step the physics world
world.step(timeStep);
// Copy coordinates from Cannon.js to Three.js
mesh.position.copy(body.position);
mesh.quaternion.copy(body.quaternion);
}
function render() {
renderer.render( scene, camera );
}

Answer 1

你能用WebGLRenderer代替CanvasRenderer吗？ 画布渲染器更像是一个webGL模拟器，而不是一个渲染器。 如果我切换到 WebGL 渲染器，这些行就会消失。

var world, mass, body, shape, timeStep = 1 / 60,
camera, scene, renderer, geometry, material, mesh,controls;
initThree();
initCannon();
animate();
function initCannon() {
world = new CANNON.World();
world.gravity.set(0, 0, 0);
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10;
shape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
mass = 1;
body = new CANNON.Body({
mass: 1
});
body.addShape(shape);
body.angularVelocity.set(0, 100, 0);
body.angularDamping = 0.5;
world.addBody(body);
}
function initThree() {
renderer = new THREE.WebGLRenderer({
alpha: true
});
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);
camera.position.z = 10;
camera.position.y = 1;
scene.add(camera);
var light = dirLight = new THREE.DirectionalLight(0xFFFFFF);
scene.add(light);
//Shadowmapping
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
//renderer.shadowMap.bias = 0.1;
light.position.set(5, 5, 5);
light.userData.targetOffset = light.position.clone();
light.castShadow = true;
light.shadow.mapSize.width = 512;
light.shadow.mapSize.height = 512;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 100.0
var shadowAreaLength = 10
light.shadow.camera.left = light.shadow.camera.bottom = -shadowAreaLength;
light.shadow.camera.right = light.shadow.camera.top = shadowAreaLength;
controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.5;
controls.autoRotate = true;
controls.maxPolarAngle *= 0.5;
controls.panSpeed *= 0.5;
controls.rotateSpeed *= 0.25;
// camera.position.set(0, 0.5, 1.7);
geometry = new THREE.BoxGeometry(2, 2, 2);
material = new THREE.MeshPhongMaterial({
shininess: 0,
color: 0x808080
});
mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
geometry2 = new THREE.BoxGeometry(1, 1, 1);
material2 = new THREE.MeshPhongMaterial({
shininess: 0,
color: 0xff0000
});
mesh2 = new THREE.Mesh(geometry2, material2);
mesh2.position.y = 2;
scene.add(mesh);
scene.add(mesh2);
var gplane =
new THREE.Mesh(new THREE.PlaneGeometry(100, 100, 10, 10), material);
scene.add(gplane);
gplane.recieveShadow = true;
gplane.rotation.x += Math.PI * -0.5;
gplane.position.y -= 2
camera.lookAt(gplane.position);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
updatePhysics();
render();
}
function updatePhysics() {
// Step the physics world
world.step(timeStep);
// Copy coordinates from Cannon.js to Three.js
mesh.position.copy(body.position);
mesh.quaternion.copy(body.quaternion);
}
function render() {
renderer.render(scene, camera);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>