Question

我是three.js的新手，我不明白为什么会发生这种情况，如果这是正常的。以下是我的渲染器设置：

if ( !webglSupported() ) {
    throw new Error("WebGL not supported!");
}

var defaults = {

    init :{
        antialias: (isDesktop)(), 
        alpha: true,
        maxLights: 4
    },

    clearColor: 0x000000,
    clearColorIntensity: 1,
    autoClear: true,
    sortObjects : true

};

this.options.renderer = $.extend( true, defaults, settings );

this.renderer = new THREE.WebGLRenderer( this.options.renderer.init );

if ( "autoClear" in this.options.renderer ) {
    this.renderer.autoClear = this.options.renderer.autoClear;
}

if ( "sortObjects" in this.options.renderer ) {
    this.renderer.sortObjects = this.options.renderer.sortObjects;
}

this.renderer.setClearColor( this.options.renderer.clearColor, this.options.renderer.clearColorIntensity );
this.renderer.setSize( this.options.generic.container.clientWidth, this.options.generic.container.clientHeight );

this.options.generic.container.appendChild( this.renderer.domElement );

画布背景设置为蓝色（＃00f），这是我的材料：

var backgroundMaterial = new THREE.MeshPhongMaterial({
    color: 0xefefef,
    specular: 0x3399ff,
    //emissive : 0xefefef,
    side: THREE.FrontSide,
    overdraw: false,
    transparent: false,
    metal:true,
    shininess: this.options.models.boxShininess,
    reflectivity: this.options.models.boxReflectivity,
    fog:false
});


var productMaterial = new THREE.MeshBasicMaterial({
    map: productModelTexture,
    color: 0xefefef,
    specular: 0x3399ff,
    //emissive : 0xefefef, 
    side: THREE.FrontSide,
    overdraw: false,
    transparent: false,
    metal:true,
    shininess: that.options.models.textureShininess,
    reflectivity: that.options.models.textureReflectivity,
    opacity: 1,
    fog:false
});

另外请记住，一切都发生在蓝色球体/圆顶内，但圆顶对这些物体没有影响。

为什么当我更改canvas css背景时，相同的颜色应用于productMaterial和backgroundMaterial？|

更新

经过一番挖掘后，我发现如果将材质的透明度设置为true（在本例中为productMaterial），则可以解决问题。我仍然不确定这是否是正确的方法。

PS：纹理是一个512x512 png，各个部分都有透明度，这些部分过去与canvas css背景颜色的颜色相同。

Answer 1

我现在在猜测，但是这个球体发生的范围是如此之大，以至于它超过了它的截头体的远处平面？

例如：

var cam = new THREE.PerspectiveCamera(60, W / H, 1, 1000);
var dome = new THREE.Mesh(
  new THREE.SphereGeometry(1000),
  material
);

会创建一个球体（如果位置未被更改）将超出相机截头尺并且将以清晰的颜色清除。

Answer 2

经过一番挖掘后，我发现如果将材质的透明度设置为true（在本例中为productMaterial），则可以解决问题。我仍然不确定这是否是正确的方法。

PS：纹理是一个512x512 png，各个部分都有透明度，这些部分过去与canvas css背景颜色的颜色相同。

three.js webgl网格材质与画布背景颜色相同

2 个答案: