#Problem With Mixing Html With Threejs On Canvas

4 messages · Page 1 of 1 (latest)

fresh tusk
#

Hello lovely people, i have problem with mixin html elements on canvas. I have created few buttons and placed them in my scene. Their point is to stay the way they are even if my camera moves but when i turn my camera 180 degrees it's still projecting on my screen flipped. Video will explain it more clearly.

My code goes like this :

const points = [ { position: new THREE.Vector3(-0.4,0.5,0.1), element: document.querySelector('.point-0') }, { position: new THREE.Vector3(-0.4,0.2,0.3), element: document.querySelector('.point-1') }, { position: new THREE.Vector3(-0.5,-0.1,-0.9), element: document.querySelector('.point-2') } ]

in animate function:

`for(const point of points)
{
const screenPosition = point.position.clone()
screenPosition.project(camera)

  const translateX = screenPosition.x * sizes.width * 0.5
  const translateY = - screenPosition.y * sizes.height * 0.5
  point.element.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`

}`

Any help is appreciated.

earnest ingot
#

The problem is that project() doesn't have any idea whether the point it's working on is in front of or behind the camera plane. Try adding something like this to the end of your code:

// You will have to choose your own value for MIN_Z; something like 0 or 1 or 0.1 would be typical.
  point.element.style.hidden = (screenPosition.z < MIN_Z);
wheat estuary
fresh tusk
#

`if (worldPosition.z > 1) {
point.element.style.display = 'none'; // Noktayı gizle
} else if(isOuterPointActive == true){
point.element.style.display = 'flex'; // Noktayı göster
const translateX = (worldPosition.x + 1) * 0.5 * sizes.width
const translateY = (-worldPosition.y + 1) * 0.5 * sizes.height

  point.element.style.left = `${translateX}px`
  point.element.style.top = `${translateY}px`
}else{
  point.element.style.display = 'none';
}

}`