https://i.sstatic.net/CwUxD.gif
Here is a codepen showcasing the issue along with a GIF illustrating the confusion.
Codepen: https://codepen.io/carelesscourage/pen/bGMWjNg
My expectation
I desire the plane to maintain the same size regardless of screen size.
//WebGl renderer
function useWebGl(root = document.body) {
const renderer = new THREE.WebGLRenderer({ alpha: true })
renderer.setClearColor( 0x009900, 1 )
renderWindow(renderer)
root.appendChild( renderer.domElement )
onResize(() => renderWindow(renderer))
return { WebGl: renderer }
}
function renderWindow(renderer) {
const { height, width } = windowDimensions()
renderer.setSize( width / 2, height / 2 )
}
//ThreeJS Engine
function initEngine() {
const scene = new THREE.Scene()
const camera = getCamera()
const { WebGl } = useWebGl()
function everyFrame(callback = () => {}) {
callback()
WebGl.render( scene, camera )
requestAnimationFrame(() => everyFrame(callback))
}
return {scene, everyFrame}
}
Everything below this line stems from the original post. I have addressed some issues and reduced the codepen to focus solely on the problem at hand. The text above this line highlights the specific issue, while the following content is retained for reference:
https://i.sstatic.net/qakGW.gif
Context
My ultimate objective is to create a plane in three.js that aligns with and sticks to an HTML element. At this stage, I am seeking assistance on how to ensure the size and position of the plane remain consistent across different screen sizes, particularly focusing on the size aspect.
Issue: I expect the plane to remain at a fixed distance from the left edge on all screen sizes. However, the plane currently shifts unpredictably in both position and size with varying screen sizes. Even when setting a static size for the plane, it behaves erratically across different screen dimensions. Despite tying the plane size to the html image size in the code, the plane continues to exhibit random changes in size.
Regarding position: The code instructs the plane to move to the top left corner of the canvas and then offset back to match the position of the HTML element relative to the top right of the screen. While this works in fullscreen desktop view, resizing the window results in inaccurate offsets and size fluctuations. The plane occasionally changes size entirely.
My expectation
I anticipated the plane to maintain a consistent size irrespective of screen size.
My best guess
The issue seems unrelated to how the plane's position is offset, as even disabling that code does not resolve the size inconsistencies. Given that the problem persists when all position and size-related code is removed, I suspect the camera handling may be the root cause. Although I utilize an orthographic camera, similar issues arise with a perspective camera.
If my assumption is correct, the problem likely lies in this section of the code:
function windowDimensions() {
const height = window.innerHeight
const width = window.innerWidth
const aspect = width / height;
return { height, width, aspect}
}
function cameraDimensions(aspect, viewSize = 1000) {
const caps = viewSize / 2
const sides = aspect*viewSize / 2
return { caps, sides }
}
function getCamera() {
const { aspect } = windowDimensions()
const { caps, sides } = cameraDimensions(aspect)
const camera = new THREE.OrthographicCamera(
-sides, sides,
caps, -caps,
-1000, 1000
)
window.addEventListener('resize', () => {
updateCamera(camera)
})
camera.position.z = 500;
return camera
}
function updateCamera(camera) {
const { aspect } = windowDimensions()
const { caps, sides } = cameraDimensions(aspect)
camera.left = -sides,
camera.right = sides,
camera.top = caps,
camera.bottom = -caps,
camera.updateProjectionMatrix();
}