admin 管理员组文章数量: 1086019
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);
}本文标签： javascriptHow to make responsive canvas with a 3d model using threejsStack Overflow
版权声明：本文标题：javascript - How to make responsive canvas with a 3d model using three.js? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1743989425a2514447.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论