CODEWITHSUNDEEP
three.js8thwall-xr
HUNG
HUNG

Reputation: 535

Unexpected output when adding png image to threejs

I am sorry that I cannot find suitable words in title to describe my problem.

Now I just created insert a png in threejs.

  var material = new THREE.MeshLambertMaterial({
      map: loader.load(phoneImg),
      transparent: true,
  });
  var geometry = new THREE.PlaneGeometry(100, 100);
  var phone = new THREE.Mesh(geometry, material);
  phone.position.set(0, 180, -220);
  scene.add(phone);

At the same time, I also map the world with a background image.

  const skyGeo = new THREE.SphereGeometry(1000, 25, 25);
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load("/img/moonsky.png");
  texture.encoding = THREE.sRGBEncoding;
  texture.mapping = THREE.EquirectangularReflectionMapping;
  const skyMaterial = new THREE.MeshPhongMaterial({
      map: texture,
      toneMapped: true,
      transparent: true,
  });
  skyBox = new THREE.Mesh(skyGeo, skyMaterial);
  skyBox.material.side = THREE.BackSide;
  scene.add(skyBox);

The problem now is when in some angles, the transparent part of the phone can be invisible as expected. However, in another some angles, it "passes through" the skyBox image and I can see the real world directly.

enter image description here enter image description here

Upvotes: 0

Views: 49

Answers (1)

HUNG
HUNG

Reputation: 535

phone.renderOrder = 110

Lastly, I tried to add renderOrder and seems the problem solved.

Upvotes: 0

Related Questions