shawn0326 / zen-3d

JavaScript 3D library.
MIT License
196 stars 24 forks source link

How to get Z distance #24

Closed VanderSP closed 2 years ago

VanderSP commented 2 years ago

Hi Shawn, im struggling in a last question here, i want to know the distance from something to camera, for using like opacity depth based, as i don´t know how to calculate correctly pi and sin in this case, maybe correcting some step of current card (like a ring of cards)

          const currentCard = userData.ring.children[0]
          const interfaceCamera = storyLine3DData.targets['interfaceCamera']

          const cardFacing = new zen3d.Vector3(0, 0, 1)
               .applyMatrix4(currentCard.worldMatrix)
               .sub(new zen3d.Vector3(0, 0, 0).applyMatrix4(currentCard.worldMatrix))
               .normalize()

          const cameraFacing = new zen3d.Vector3(0, 0, 1)
               .applyMatrix4(interfaceCamera.worldMatrix)
               .sub(new zen3d.Vector3(0, 0, 0).applyMatrix4(interfaceCamera.worldMatrix))
               .normalize()

          const opacity = cardFacing.dot(cameraFacing)

it´s inspired in threejs strategies, but i got static values instead of dynamic, any clue? THANKS!

this also gives a constant value of 0.06495423305620554:

let facing = new zen3d.Vector3(0, 0, 1)
               .transformDirection(interfaceCamera.worldMatrix)
               .dot(new zen3d.Vector3(0, 0, 1).transformDirection(currentCard.worldMatrix))
console.log(facing)

edit:

i got a way of working with distanceto method

console.log(
               new zen3d.Vector3(0, 0, 1)
                    .applyMatrix4(currentCard.worldMatrix)
                    .distanceTo(new zen3d.Vector3(0, 0, 1).applyMatrix4(interfaceCamera.worldMatrix))
          )

this gives me a value range, but when i zoom the camera obviously it changes... but maybe i can compensate with some multiplication... maybe not the smart way

i got consistent value subtracting

 const distance = new zen3d.Vector3(0, 0, 1)
               .applyMatrix4(currentCard.worldMatrix)
               .distanceTo(new zen3d.Vector3(0, 0, 1).applyMatrix4(interfaceCamera.worldMatrix))

          console.log(distance - interfaceCamera.position.z)

but it´s a value ranging from 15 to 20... i even tried to nail z down to 0 of groups.. and it goes from 2.1 to 4

there´s a way to get just consistent 0 to 1 or something like -1 to 1? or even some math to calculate a sin/cos like to make opacity of each card goes down and up for the next one in rotation?

Sorry asking a lot, Thanks by all your efforts.

VanderSP commented 2 years ago

closing this issue, i changed to threejs as they fixed some stuff, i know that i will lost water performance but i need to calculate the z and also im integrating now css on gl for websites...