0
オンラインの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);
});
onWindowResizeは定義されていませんか? –
関数をイベントリスナーと同じスコープで定義しましたか? jQueryの代わりに私の回答を編集しました。 – guardabrazo
@MatthewAnderson、私は私の答えに働くcodepenを追加しました。 – guardabrazo