responsive canvas with a 3d model using tree.js

问题内容:

good, I’m making a web page where I created a canvas to show a 3d object (a cube) using threejs. I am adding the canvas in a div (as shown in several documentations); Now when I change the size of the screen to small the canvas and the object become 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.com/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>

问题评论:

原文地址:

https://stackoverflow.com/questions/47756462/responsive-canvas-with-a-3d-model-using-tree-js

添加评论

友情链接:蝴蝶教程