Three.js CanvasRenderer问题

Question

我只是在尝试Three.js。由于我想使用CanvasRenderer作为不支持WebGL的设备的后备，我注意到两个问题：

精简线/坏几何体？

附加像素

这是我当前的代码

var width = 960;
var height = 500;
var aspect = width / height;

var D = 1;

var CanvasRenderer = true;

var scene    = new THREE.Scene();
var camera   = new THREE.OrthographicCamera(-D * aspect, D * aspect, D, -D, 1, 1000);

if(CanvasRenderer) {
    var renderer = new THREE.CanvasRenderer({
        alpha: true,
        antialias: true
    });
} else {
     var renderer = new THREE.WebGLRenderer({
	alpha: true,
     	antialias: true
     });
}

renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(0.1, 1, 0.5);


var cube = new THREE.Mesh(geometry, [
	new THREE.MeshPhongMaterial({
        color: 0x222222, // right
        overdraw: true
    }),
	new THREE.MeshPhongMaterial({
        color: 0xffffff,
        overdraw: true
    }),
    new THREE.MeshPhongMaterial({
        color: 0xEDE6F5, // Top
        overdraw: true
    }),
    new THREE.MeshPhongMaterial({
        color: 0xffffff,
        overdraw: true
    }),
    new THREE.MeshPhongMaterial({
        color: 0xFFFFFF, // Left
        overdraw: true
    }),
    new THREE.MeshPhongMaterial({
        color: 0xffffff,
        overdraw: true
    })
]);

scene.add(cube);
scene.add(new THREE.AmbientLight(0xFFFFFF));

camera.position.set(20, 20, 20);
camera.lookAt(scene.position);

renderer.render(scene, camera);

body {
  margin: 0px;
  overflow: hidden;
  background: #EEE;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/Projector.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"></script>

WebGL差异

您可以看到与WebGL渲染器的区别：

的jsfiddle

http://jsfiddle.net/4tbs4tpL/2/

Answer 1

使用CanvasRenderer时，Material.overdraw属性的值介于0和1之间。合理的值为0.5。

您引用的工件可能会因overdraw的较低值而减少。

three.js r.86