I'm making a web page where I created a canvas to show a 3d object (a cube) using threejs. I added this canvas into a div (as shown in several documentations).
The prolem is that when I change the size of the screen to small the canvas and the object bee small, that works well, but when the screen changes to large the canvas extends and occupies the whole page.
What I am looking for is to maintain the dimensions that assign both width and height
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset= UFT-8>
<title>tema</title>
<style type="text/css">
div{
width: 50%;
margin-left: 20px;
margin-right: 100px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid blue;
}
</style>
</head>
<body>
<section class="menu">
<div id="container"></div>
<script src=".min.js" ></script>
<script type="text/javascript">
function init(){
width = 500;
height = 500;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, width/height, 0.1, 1000 );
camera.position.z = 500;
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height);
renderer.setClearColor( 0xffffff);
renderer.setPixelRatio( window.devicePixelRatio );
contenedor = document.getElementById('container');
contenedor.appendChild(renderer.domElement);
var obj = new THREE.CubeGeometry(100,100,100);
var material = new THREE.MeshNormalMaterial();
body = new THREE.Mesh(obj,material);
scene.add( body );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth/ window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
var animate = function () {
requestAnimationFrame( animate );
body.rotation.x+=0.01;
body.rotation.y+=0.01;
renderer.render(scene, camera);
};
init();
animate();
</script>
</section>
</body>
</html>I'm making a web page where I created a canvas to show a 3d object (a cube) using threejs. I added this canvas into a div (as shown in several documentations).
The prolem is that when I change the size of the screen to small the canvas and the object bee small, that works well, but when the screen changes to large the canvas extends and occupies the whole page.
What I am looking for is to maintain the dimensions that assign both width and height
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset= UFT-8>
<title>tema</title>
<style type="text/css">
div{
width: 50%;
margin-left: 20px;
margin-right: 100px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid blue;
}
</style>
</head>
<body>
<section class="menu">
<div id="container"></div>
<script src="https://ajax.googleapis./ajax/libs/threejs/r76/three.min.js" ></script>
<script type="text/javascript">
function init(){
width = 500;
height = 500;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, width/height, 0.1, 1000 );
camera.position.z = 500;
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height);
renderer.setClearColor( 0xffffff);
renderer.setPixelRatio( window.devicePixelRatio );
contenedor = document.getElementById('container');
contenedor.appendChild(renderer.domElement);
var obj = new THREE.CubeGeometry(100,100,100);
var material = new THREE.MeshNormalMaterial();
body = new THREE.Mesh(obj,material);
scene.add( body );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth/ window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
var animate = function () {
requestAnimationFrame( animate );
body.rotation.x+=0.01;
body.rotation.y+=0.01;
renderer.render(scene, camera);
};
init();
animate();
</script>
</section>
</body>
</html>-
I'm not sure what you're asking — when the screen bees larger, the canvas bees larger, so isn't that what you mean by "responsive"? If you want the canvas to stay a certain size, you should set
width: 500px;ormax-width: 500px;in your CSS. – Don McCurdy Commented Dec 11, 2017 at 17:51 - Exactly that is what I mean by answer, and yes, I also want the canvas to retain its size. because when I enlarge the screen the canvas adopts the size of the screen and not the container, even add the max-width but still with overflow. – lesly peña Commented Dec 11, 2017 at 18:19
- I think the problem is in the onWindowResize function because I use the measurements on the screen, but I can not find how to assign the measurements of the canvas. – lesly peña Commented Dec 11, 2017 at 18:23
-
You can use
contenedor.clientWidthorcontenedor.clientHeight– Don McCurdy Commented Dec 11, 2017 at 18:24 - wao! It worked, but you could explain why that happens. Thank you very much – lesly peña Commented Dec 11, 2017 at 18:32
2 Answers
Reset to default 4It's not really surprising, you are resizing the renderer with the whole window width/height instead of the actual container div width/height, so what would you expect...?
Try to replace onWindowResize with that:
function onWindowResize() {
camera.aspect = contenedor.clientWidth / contenedor.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(contenedor.clientWidth, contenedor.clientHeight);
}
Instead of changing the size of the canvas, you can change the position of the object or the position of the camera by using javascript media queries. Refer to the below code it helped in my case.
loader.load('assets/check.glb', handle_load);
var mesh;
function handle_load(gltf) {
console.log(gltf);
mesh = gltf.scene;
console.log(mesh.children[0]);
mesh.children[0].material = new THREE.MeshLambertMaterial();
scene.add( mesh );
mesh.position.z = 3;
mesh.position.x = 1.8;
mesh.position.y = -0.4;
mesh.rotation.x = 0.3;
function media(x) {
if (x.matches) {
mesh.position.z = 1;
mesh.position.x = 0;
mesh.position.y =-0.4;
} else {
mesh.position.z = 3;
mesh.position.x = 1.8;
mesh.position.y = -0.4;
}
}
var x = window.matchMedia("(max-width: 700px)")
media(x)
x.addListener(media);
}