0
저는 3J를 사용하여 3 차원 물체 (큐브)를 보여주기 위해 캔버스를 만든 웹 페이지를 만들고 있습니다. 이 캔버스를 div에 추가했습니다 (여러 가지 문서에서 볼 수 있듯이).
화면 크기를 작게 변경하면 캔버스가 작아지고 잘 작동하지만 화면이 커지면 캔버스가 확장되어 전체 페이지를 차지합니다.
내가 찾고있는 것은 너비와 높이를 모두 지정하는 치수를 유지하는 것입니다.
미리 감사드립니다. three.js를 사용하여 3D 모델로 반응 형 캔버스를 만드는 방법은 무엇입니까?
<!DOCTYPE html>
<html>
\t <head>
\t \t <meta charset= UFT-8> \t \t
\t \t <title>tema</title>
\t \t <style type="text/css">
\t \t \t
\t \t \t div{
\t \t \t \t width: 50%;
\t \t \t \t margin-left: 20px;
\t \t \t \t margin-right: 100px;
\t \t \t \t margin-top: 20px;
\t \t \t \t margin-bottom: 20px;
\t \t \t \t border: 2px solid blue;
}
\t \t </style>
\t </head>
\t <body>
\t \t <section class="menu">
\t \t \t <div id="container"></div>
\t \t \t
\t \t \t <script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js" ></script>
\t \t
\t \t \t <script type="text/javascript">
\t \t \t \t function init(){
\t \t \t width = 500;
\t \t \t height = 500; \t
\t \t \t scene = new THREE.Scene();
\t \t \t camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
\t \t \t camera.position.z = 500;
\t \t \t renderer = new THREE.WebGLRenderer();
\t \t \t renderer.setSize(width, height);
\t \t \t renderer.setClearColor(0xffffff);
\t \t \t renderer.setPixelRatio(window.devicePixelRatio);
\t \t \t
\t \t \t contenedor = document.getElementById('container');
\t \t \t contenedor.appendChild(renderer.domElement);
\t \t \t
\t \t \t var obj = new THREE.CubeGeometry(100,100,100);
\t \t \t var material = new THREE.MeshNormalMaterial();
\t \t \t
\t \t \t body = new THREE.Mesh(obj,material);
\t \t \t
\t \t \t scene.add(body);
\t \t \t window.addEventListener('resize', onWindowResize, false);
\t \t \t }
\t \t \t function onWindowResize() {
\t \t \t \t
\t \t \t \t camera.aspect = window.innerWidth/ window.innerHeight;
\t \t \t \t camera.updateProjectionMatrix();
\t \t \t \t renderer.setSize(window.innerWidth, window.innerHeight);
\t \t \t }
\t \t \t var animate = function() {
\t \t \t \t requestAnimationFrame(animate);
\t \t
\t \t \t \t body.rotation.x+=0.01;
\t \t \t \t body.rotation.y+=0.01;
\t \t \t \t \t
\t \t \t \t renderer.render(scene, camera);
\t \t \t };
\t \t \t init();
\t \t \t animate();
\t \t \t
\t \t \t </script>
\t \t </section>
\t </body>
</html>
는 당신이 요구하는지 모르겠어요 "? 캔버스를 특정 크기로 유지하려면 CSS에'width : 500px;'또는'max-width : 500px;'를 설정해야합니다. –
정확하게 대답은 내 뜻입니다. 예, 캔버스의 크기를 유지하려고합니다. 왜냐하면 화면을 확대 할 때 캔버스는 화면이 아닌 컨테이너의 크기를 채택하기 때문에 심지어 최대 너비를 추가하지만 여전히 오버플로가 있기 때문입니다. –
화면에서 측정을 사용하기 때문에 문제가 onWindowResize 함수에 있다고 생각하지만 캔버스의 측정 값을 할당하는 방법을 찾을 수 없습니다. –