Three.js - CanvasRenderer问题：平面阴影？

Question

我尝试使用CanvasRenderer（three.js）作为不支持WebGL的设备的后备广告。是否有一些比较页面解释了什么是不同的，不能与CanvasRenderer一起使用？

我遇到了两个主要问题：

1. 平面阴影，灯光完全缺失（支持MeshPhongMaterial？），我看不到任何光线和阴影（CanvasRenderer支持阴影）？我只看到没有任何光照的漫反射纹理。在WebGL中，我当前的设置是PointLight, DirectionalLight, softShadows, antialiasing和MeshPhongMaterial（带有漫反射，凹凸，规格和env贴图）

   this.materialM = new THREE.MeshPhongMaterial({
           ambient : 0x050505,
           color : this.model.color,
           specular : 0xcccccc,
           shininess : 100,
           bumpScale : BUMP_SCALE,
           reflectivity : REFLECTIVITY,
       });
   

2. 透明多边形边缘（我知道它可以用material.overdraw = 0.5进行调整但它会产生其他伪影（因为它可能只会在正常情况下对多边形进行一些缩放？），但我能做到这个

我们非常感谢您对CanvasRenderer与WebGLRenderer进行比较时所提供的内容的一般性概述。

three.js r68

Answer 1

CanvasRenderer有局限性。

MeshPhongMaterial不支持

1. CanvasRenderer - 它会回归MeshLambertMaterial。

支持

2. MeshLambertMaterial，但在材质具有纹理时则不支持 - 它会回退到MeshBasicMaterial。 （MeshBasicMaterial无需考虑场景灯即可呈现。）

3. 不支持阴影。

4. material.overdraw = 0.5有助于在材质不透明时隐藏多边形边缘。如果材料是透明的，它可能仍会留下瑕疵。

three.js r.68