三.js WebGL 网格材质获得与画布背景相同的颜色

three.js webgl mesh materials get the same color as canvas background

本文关键字：背景 颜色 布背景 网格 WebGL js      更新时间：2023-09-26

好吧，我是三个新手.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
});

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

为什么当我更改画布 css 背景时，相同的颜色应用于产品材料和背景材料 ？|

更新

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

PS：texure是一个512x512 png，各个部分都有透明度，这些部分曾经显示为与画布CSS背景颜色相同的颜色。

我现在

在猜测，但是这种情况发生的球体是否如此之大，以至于超过了其视锥体的远平面？

例如：

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

创建一个球体（如果位置未更改）将超出相机视锥体，并以清晰的颜色清除。

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

PS：texure是一个512x512 png，各个部分都有透明度，这些部分曾经显示为与画布CSS背景颜色相同的颜色。

相关文章：