我需要隐藏 ThreeJS 盒子原语的边缘答案

【问题标题】：I Need to hide edges on ThreeJS box primitive我需要隐藏 ThreeJS 盒子原语的边缘
【发布时间】：2020-04-26 16:42:34
【问题描述】：

我需要使用 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/

干杯！

【问题讨论】：

小提琴似乎不起作用？你能澄清什么>我需要使用 ThreeJS 删除显示在框基元中的顶点。这些仅在我在脸上放置纹理时绘制。如果您删除一个顶点，您很可能会删除一半的盒子。此外，您很可能必须删除 indecis 和其他属性。我敢打赌你需要别的东西。
我很抱歉这个错误。我的意思是删除（或不绘制）您在示例中看到的白色边缘。
见stackoverflow.com/questions/20199721/…
感谢 WestLangley，几分钟前我刚刚测试了 WebGLRenderer 并解决了问题 ;)

标签： javascript three.js textures edges

【解决方案1】：

我已经解决了更改这一行的问题

renderer = new THREE.CanvasRenderer();

为了这个别人

renderer = new THREE.WebGLRenderer();

其他可能的解决方案，正如上面提到的 WestLangley 是将此行与 CanvasRenderer 一起使用

material.overdraw = 0.5; // or some number between 0 and 1

【讨论】：

【解决方案2】：

当使用renderer = new THREE.CanvasRenderer(); 要移除边缘，需要在材质定义中添加一个参数 (overdraw:true)，如下所示：

var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );

然后您可以使用将材质添加到 3D 对象：

mesh = new THREE.MeshBasicMaterial( geometry, material );

【讨论】：

"var material = new THREE.MeshBasicMaterial( { overdraw: true } );"没有地图：纹理