As stated in the title, box in the render canvas is resizing when the browser resizes. How do I fix this?
here is my code:
var renderer = new THREE.WebGLRenderer
(
{
canvas: document.getElementById(‘myCanvas’),
antialias: true
}
);
renderer.setClearColor(0x00ff00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
$(window).resize(function() {
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
});
var camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set(0, 0, 5);
var scene = new THREE.Scene();
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial();
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
requestAnimationFrame(render);
function render () {
mesh.rotation.x += 0.1;
mesh.rotation.y += 0.2;
}
renderer.render(scene, camera);
Here is what happens: https://gyazo.com/c3df3bc35519955a5c284c0cbaa401f4
Any help would be greatly appreciated!
Thank you for your time!
-Matt