У меня есть некоторые проблемы с цветом в моем материале Threejs - PullRequest
0 голосов
/ 28 апреля 2018

Я хотел создать черный и белый простые плоские объекты. У меня есть 2 источника света (окружение и точка):

...
    this.ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.1);
    this.light = new THREE.PointLight( 0xFFFFFF, 0.1 );
...

Я также создал и добавил свои самолеты в сцену:

...
    let plane1 = this.create('plane', this.white);
    let plane2 = this.create('plane', this.black);
    plane2.position.x = 3;

    this.scene.add(plane1);
    this.scene.add(plane2);
...

Результат выглядит следующим образом (см. Рисунок):

enter image description here

Сложно сказать, кто из них белый, а кто черный :( Так что, думаю, я сделал это неправильно.

Я думаю, это потому, что я использую PhongMaterial на обоих. Причина в том, что я использую этот тип материала, потому что я хочу, чтобы на них воздействовали источники света, и я хочу сохранить их затенение. С другой стороны, я хочу уменьшить этот цветовой эффект, который делает их обоих черными.

Мои материалы (белые и черные):

white = new THREE.MeshPhongMaterial(<any>{
    alphaMap: null,
    alphaTest:0,
    aoMap:null,
    aoMapIntensity:1,
    blendDst:205,
    blendDstAlpha:null,
    blendEquation:100,
    blendEquationAlpha:null,
    blendSrc:204,
    blendSrcAlpha:null,
    blending:1,
    bumpMap:null,
    bumpScale:1,
    clipIntersection:false,
    clipShadows:false,
    clippingPlanes:null,
    color:{r: 0.8, g: 0.8, b: 0.8},
    colorWrite:true,
    combine:0,
    depthFunc:3,
    depthTest:true,
    depthWrite:true,
    displacementBias:0,
    displacementMap:null,
    displacementScale:1,
    dithering:false,
    emissive:{r: 0, g: 0, b: 0},
    emissiveIntensity:1,
    emissiveMap:null,
    envMap:null,
    flatShading:false,
    fog:true,
    lightMap:null,
    lightMapIntensity:1,
    lights:true,
    map:null,
    morphNormals:false,
    morphTargets:false,
    name:"Material",
    normalMap:null,
    normalScale:{x: 1, y: 1},
    opacity:1,
    overdraw:0,
    polygonOffset:false,
    polygonOffsetFactor:0,
    polygonOffsetUnits:0,
    precision:null,
    premultipliedAlpha:false,
    reflectivity:1,
    refractionRatio:0.97,
    shininess:50,
    side:2,
    skinning:false,
    specular: {r: 0.5, g: 0.5, b: 0.5},
    specularMap:null,
    transparent:false,
    vertexColors:0,
    visible:true,
    wireframe:false,
    wireframeLinecap:"round",
    wireframeLinejoin:"round",
    wireframeLinewidth:1
  });

  black = new THREE.MeshPhongMaterial(<any>{
    alphaMap:null,
    alphaTest:0,
    aoMap:null,
    aoMapIntensity:1,
    blendDst:205,
    blendDstAlpha:null,
    blendEquation:100,
    blendEquationAlpha:null,
    blendSrc:204,
    blendSrcAlpha:null,
    blending:1,
    bumpMap:null,
    bumpScale:1,
    clipIntersection:false,
    clipShadows:false,
    clippingPlanes:null,
    color: {r: 0, g: 0, b: 0},
    colorWrite:true,
    combine:0,
    depthFunc:3,
    depthTest:true,
    depthWrite:true,
    displacementBias:0,
    displacementMap:null,
    displacementScale:1,
    dithering:false,
    emissive: {r: 0, g: 0, b: 0},
    emissiveIntensity:1,
    emissiveMap:null,
    envMap:null,
    flatShading:false,
    fog:true,
    lightMap:null,
    lightMapIntensity:1,
    lights:true,
    map:null,
    morphNormals:false,
    morphTargets:false,
    name:"Material",
    normalMap:null,
    normalScale: {x: 1, y: 1},
    opacity:1,
    overdraw:0,
    polygonOffset:false,
    polygonOffsetFactor:0,
    polygonOffsetUnits:0,
    precision:null,
    premultipliedAlpha:false,
    reflectivity:1,
    refractionRatio:0.98,
    shininess:50,
    side:2,
    skinning:false,
    specular: {r: 0.4, g: 0.4, b: 0.4},
    specularMap:null,
    transparent:false,
    vertexColors:0,
    visible:true,
    wireframe:false,
    wireframeLinecap:"round",
    wireframeLinejoin:"round",
    wireframeLinewidth:1
  });

Может кто-нибудь опытный помочь мне с этим, пожалуйста? :) Спасибо за ваше время заранее!

1 Ответ

0 голосов
/ 29 апреля 2018

PhongMaterial не имеет четко определенных объектов в своем конструкторе. Свойство цвета должно выглядеть так:

...
new THREE.COlor(r: 0, g: 0, b: 0)
...

вместо:

...
{r: 0, g: 0, b: 0}
...
...