0
3jを使って3次元オブジェクト（キューブ）を表示するキャンバスを作成したWebページを作っています。私はこのキャンバスを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関数にあると思いますが、キャンバスの測定値をどのように割り当てるかわかりません。 –