How to get the exact scale of a sprite image for a geomery object...?

Questions
, , ,
1

I have 2 questions, and I need your warm helps. T T

image
image1266×1433 33.1 KB

In the above image…

  • The green wireframe is a PlaneGeometry.
  • The red edge is a BoxGeometry, which has same x y z lengths.
  • The camera position is ( 1, 1, 0.8165 ) to make dimetric 35.264 degree view, which is refered from Isometric video game graphics - Wikipedia.
  • cos( 35.264 ) = 0.8165

image
image1266×1433 77.4 KB

And, I’ve put a 2D image on it…

  • By SpriteMaterial & Sprite.
  • By .scale.set( width, height ) with MY OWN calculation.
  • width = side length * √2
  • height = ( width * 1/2 ) + ( side length * cos( 30 ) ) → This has a relation with my 2nd question in below.

image
image1266×1433 35.1 KB

My 1st question is…

  • I guess that there should be an easier way to know the exact scale of the light yellow zone in the above image.
  • In other words, is there any function to know the bound scales or coordinates which covers a geometry?

My 2nd question is…

  • I’m following the ideal isometric (actually dimetric) game camera angle.
  • When I calculate the height of the light yellow zone, I realized that I need to use cos( 30 ), not cos( 35.264 ), although the camera angle is 35.264 degree.
  • I realized this by just measuring with PhotoShop, but I don’t know it is mathmatically right or not.
  • Why cos( 30 ) is used for calculating the projection height in 35.264 degree projection?

Thank you for reading my long article…!

2

  1. Are you using OrthographicCamera or PerspectiveCamera?

  2. If you want to build 2D isometric game / app -
    pixi.js may be a bit better choice than three.js, since it uses pixels instead of arbitrary units for measurements, reducing the calculations quite a bit.

1 Like
3

Thank you for your resoponse. : )

I’m using OrthographicCamera for this.

About PixiJS, I have more expriences on PixiJS than Three.js, but for this project, I need to mix sprite and 3D objects on Cannon.js, so I’m newly checking Three.js. At the same time, I’m checking Pixi3D together to solve this issues as well. I’m planning to make this with Three.js and PixiJS + Pixi3D to compare the performance.

4

Just for someone like me in the future, I’m leaving the core part of the solution.

// 2D Bounds
let box2      = new THREE.Box2()
let vector    = new THREE.Vector3()
let positions = mesh.geometry.getAttribute( 'position' )
for( let i = 0; i < positions.count; i ++ ) {
  vector.fromBufferAttribute( positions, i ).applyMatrix4( mesh.matrixWorld )
  let projectedVector = vector.clone().project( camera )
  box2.expandByPoint( new THREE.Vector2( projectedVector.x, projectedVector.y ) )
}

// Box2 Size
let boxWidth  = box2.max.x - box2.min.x
let boxHeight = box2.max.y - box2.min.y

// Camera Size
let cameraWidth  = camera.right - camera.left
let cameraHeight = camera.top   - camera.bottom

// Sprite Scale
let scaleX = boxWidth  * cameraWidth  / 2
let scaleY = boxHeight * cameraHeight / 2