Question

我正在创建一个网页，我在其中使用threejs创建了一个显示3d对象（多维数据集）的画布。我将这个画布添加到div中（如几个文档中所示）问题是，当我将屏幕的大小更改为小的画布并且对象变小时，效果很好，但是当屏幕变大时，画布会延伸并占据整个页面。
我要找的是保持宽度和高度分配的尺寸提前致谢。

<!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>

Answer 1

这并不奇怪，你用整个窗口的宽度/高度而不是实际的容器div宽度/高度来调整渲染器的大小，所以你期望什么......？

尝试将onWindowResize替换为：

function onWindowResize() {

    camera.aspect = contenedor.clientWidth / contenedor.clientHeight;

    camera.updateProjectionMatrix();

    renderer.setSize(contenedor.clientWidth, contenedor.clientHeight);
}

Answer 2

您可以通过使用javascript媒体查询来更改对象的位置或相机的位置，而不是更改画布的大小。请参阅以下对我的情况有帮助的代码。

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);
    }

如何使用three.js制作具有三维模型的响应式画布？

2 个答案: