three.js에서 뷰의 크기를 조절하면 이미지가 축소됩니다.

온라인 3D 조작 도구를 만들려고합니다. 회전 큐브와 그리드를 사용하여 THREE.js 뷰를 설정했습니다. 코드를 실행하면 100 % 정상적으로 작동하지만 뷰의 크기를 조정하면 THREE.js 화면이 조정되지 않습니다. (브라우저보기의 모양에 따라 장면의 길이 또는 너비가 축소됩니다.)보기가 왜곡되어 보입니다. 당신이 사용하고 있기 때문에,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); 
 
});

출처

2016-09-07 Matthew Anderson

크기 조정을 처리하는 코드에서 이벤트 리스너를 추가 jQuery, 너 너 이 코드를 추가 할 수 있습니다.

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

Click here 작동 코드를 보시려면 여기를 클릭하십시오.

출처

2016-09-07 16:46:36 guardabrazo

onWindowResize가 정의되지 않았습니까? –

이벤트 리스너와 동일한 범위에서 함수를 정의 했습니까? jQuery 대안을 사용하여 내 대답을 편집했습니다. – guardabrazo

@MatthewAnderson, 제 답변에 작업 코드를 추가했습니다. 확인해보십시오. – guardabrazo

three.js에서 뷰의 크기를 조절하면 이미지가 축소됩니다.

답변

관련 문제