three.jsのビューのサイズを変更すると画像が縮小されます

Question

オンラインの3D操作ツールを作成しようとしています。回転キューブとグリッドでTHREE.jsビューを設定しました。コードを実行すると100％正常に動作しますが、ビューのサイズを変更してもTHREE.jsの画面は調整されません。 （ブラウザの表示の仕方によっては、シーンの長さや幅が縮小されます）、見た目が歪んで見えることがあります。あなたが使用しているので、

function onWindowResize() { 
    w = window.innerWidth; 
    h = window.innerHeight; 
    camera.aspect = w/h; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(w, h); 
} 

または：その後、

window.addEventListener('resize', onWindowResize, false); 

そして：

$(function(){ 
 
\t 
 
\t var scene = new THREE.Scene(); 
 
\t var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500); 
 
\t var renderer = new THREE.WebGLRenderer(); 
 
\t 
 
\t renderer.setClearColor(0xdddddd); 
 
\t renderer.setSize(window.innerWidth, window.innerHeight); 
 
\t renderer.shadowMap.enabled = true; 
 
\t renderer.shadowMapSoft = true; 
 
\t 
 
\t var axis = new THREE.AxisHelper(10); 
 
\t scene.add(axis); 
 
\t 
 
\t var color = new THREE.Color("rgb(255,0,0)"); 
 
\t var color2 = new THREE.Color(0xd3d3d3); 
 
\t var grid = new THREE.GridHelper(50, 15, color, color2); 
 
\t 
 
\t scene.add(grid); 
 
\t 
 
\t var cubeGeometry = new THREE.BoxGeometry(5, 5, 5); 
 
\t var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3300}); 
 
\t var cube = new THREE.Mesh(cubeGeometry, cubeMaterial) 
 
\t 
 
\t /*var planeGeometry = new THREE.PlaneGeometry(30, 30, 30); 
 
\t var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); 
 
\t var plane = new THREE.Mesh(planeGeometry, planeMaterial); 
 
\t 
 
\t plane.rotation.x = -.5*Math.PI; 
 
\t plane.position.y = -.1 
 
\t plane.recieveShadow = true; 
 
\t 
 
\t scene.add(plane);*/ 
 
\t 
 
\t cube.position.x = 2.5; 
 
\t cube.position.y = 4; 
 
\t cube.position.z = 2.5; 
 
\t cube.castShadow = true; 
 
\t 
 
\t scene.add(cube); 
 
\t 
 
\t var spotLight = new THREE.SpotLight(0xffffff); 
 
\t spotLight.castShadow = true; 
 
\t spotLight.position.set(15, 30, 50); 
 
\t 
 
\t scene.add(spotLight); 
 
\t 
 
\t camera.position.x = 40; 
 
\t camera.position.y = 40; 
 
\t camera.position.z = 40; 
 
\t 
 
\t camera.lookAt(scene.position); 
 
\t 
 
\t var guiControls = new function(){ 
 
\t \t this.rotationX = 0.01; 
 
\t \t this.rotationY = 0.01; 
 
\t \t this.rotationZ = 0.01; 
 
\t } 
 
\t 
 
\t var datGUI = new dat.GUI(); 
 
\t datGUI.add(guiControls, 'rotationX', 0, 1); 
 
\t datGUI.add(guiControls, 'rotationY', 0, 1); 
 
\t datGUI.add(guiControls, 'rotationZ', 0, 1); 
 
\t 
 
\t render(); 
 
\t function render() { 
 
     //Me trying to reset the camera view every render 
 
\t \t camera.fov = 45 
 
\t \t camera.aspect = window.innerWidth/window.innerHeight 
 
\t \t camera.near = .1 
 
\t \t camera.far = 500 
 
\t \t scene.add(camera); 
 
\t \t cube.rotation.x += .1; 
 
\t \t renderer.setSize(window.innerWidth, window.innerHeight); 
 
\t \t requestAnimationFrame(render); 
 
\t \t renderer.render(scene, camera); 
 
\t } 
 
\t 
 
\t $("#world").append(renderer.domElement); 
 
\t renderer.render(scene, camera); 
 
});

Answer 1

サイズ変更を処理するために、あなたのコード内でイベントリスナーを追加します。 jQuery、あなたこれを代わりに追加することができます：

$(window).resize(function() { 
    w = window.innerWidth; 
    h = window.innerHeight; 
    camera.aspect = w/h; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(w, h); 
}); 

Click here作業コードを参照してください。