reposition the canvas

This commit is contained in:
CJSatnarine
2025-03-20 12:20:03 -04:00
parent 5d6f3db809
commit 57a4b6c72c
3 changed files with 10 additions and 4 deletions

View File

@@ -11,14 +11,19 @@ let previousFrame = performance.now();
// Rendering.
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#canvas'),
canvas: document.querySelector('#rendering_canvas'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);
// Resizing the camera position based on window width.
// Change location of canvas.
let footer = document.querySelector('#footer');
let canvas = document.querySelector('#rendering_canvas');
footer.before(canvas);
// Resizing the camera position based on window width. (change this to be automatic I guess)
if (window.innerWidth <= 400) {
camera.position.z = 6.5;
}
@@ -31,6 +36,7 @@ else if (window.innerWidth > 650 && window.innerWidth <= 915) {
camera.position.z = 3.5;
}
// Lighting.
const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(light);