我需要使用 ThreeJS 隐藏框基元中显示的边缘。仅当我在脸上放置纹理时才会绘制这些。
我尝试过许多选项,例如wireframe=false,但边缘仍然被绘制。
这是代码:
var container, stats;
var camera, scene, renderer;
var canvasWidth = 500;
var canvasHeight = 500;
var windowHalfX = 100;
var windowHalfY = 100;
container = document.createElement( 'div' );
document.body.appendChild( container );
// Camera
camera = new THREE.OrthographicCamera( canvasWidth / - 2, canvasWidth / 2, canvasHeight / 2, canvasHeight / - 2, - 500, 5000 );
// Scene
scene = new THREE.Scene();
camera.position.x = 200;
camera.position.y = 200;
camera.position.z = 200;
camera.lookAt( scene.position );
// Renderer
renderer = new THREE.CanvasRenderer();
renderer.setClearColor( "#fff" );
renderer.setSize( canvasWidth, canvasHeight );
container.appendChild( renderer.domElement );
var size = 100;
geometry = new THREE.BoxGeometry( size, size, size );
material = new THREE.MeshBasicMaterial({
color: "#0000ff",
side: THREE.DoubleSide,
wireframe: false
});
// Comment this line to paint a single color cube
material = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture("http://upload.wikimedia.org/wikipedia/commons/8/81/Color_icon_black.png") });
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var draw = function() {
requestAnimationFrame( draw );
renderer.render( scene, camera );
}
draw();
示例链接:
http://jsfiddle.net/gyss/qg4x9/
干杯!
最佳答案
我已经解决了更改此行的问题
renderer = new THREE.CanvasRenderer();
对于这个其他
renderer = new THREE.WebGLRenderer();
其他可能的解决方案,正如 WestLangley 上面评论的那样,是将这一行与 CanvasRenderer 一起使用
material.overdraw = 0.5; // or some number between 0 and 1
关于javascript - 我需要隐藏 ThreeJS 框基元上的边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23922936/