three.jsで球体を作り360°カメラで撮影した客室写真をテクスチャとして貼り付けて、
客室ギャラリーの制作を行っています。
質問させて頂きたいのですが、three.jsが読み込まれた段階のズーム比率を変えることは
可能でしょうか?
撮影した部屋によって壁や家具類が近かったり、遠かったりするためズームの初期値を
変更しないと客室によって部屋全体が全て移らない状況になってしまいます。
詳しい方がいらっしゃいましたらアドバイスをいただけないでしょうか。
よろしくお願いいたします。
<script> (function () { var width = window.innerWidth; var height = window.innerHeight; var element; var scene, camera, renderer, controls; function init() { scene = new THREE.Scene(); window.addEventListener("resize", handleResize, false); camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000); camera.position.set(0, 0, 0); scene.add(camera); // 球体の形状を作成 var geometry = new THREE.SphereGeometry(5, 60, 40); geometry.scale(-1, 1, 1); // マテリアルの作成 var material = new THREE.MeshBasicMaterial({ // 画像をテクスチャとして読み込み map: THREE.ImageUtils.loadTexture("../../img/360/12345.jpg") }); sphere = new THREE.Mesh(geometry, material); scene.add(sphere); renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); renderer.setClearColor({color: 0x000000}); element = renderer.domElement; document.getElementById("stage").appendChild(element); renderer.render(scene, camera); var isAndroid = false; var isIOS = false; if (navigator.userAgent.indexOf("Android") != -1) { isAndroid = true; } else if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { isIOS = true; } setOrbitControls(); ?> } else { setOrbitControls(); } render(); } // リサイズ処理 function handleResize() { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); } function setOrbitControls() { controls = new THREE.OrbitControls(camera, element); controls.target.set( camera.position.x + 0.15, camera.position.y, camera.position.z ); controls.enableDamping = true; controls.dampingFactor = 0.2; controls.rotateSpeed = 0.05; controls.noZoom = false; controls.noPan = false; controls.maxDistance = 5; controls.zoomSpeed = 5.0; controls.panSpeed = 2.0; } function setOrientationControls(e) { if (!e.alpha) { return; } controls = new THREE.DeviceOrientationControls(camera, true); controls.connect(); controls.update(); window.removeEventListener("deviceorientation", setOrientationControls, true); } function render() { requestAnimationFrame(render); renderer.render(scene, camera); controls.update(); } window.addEventListener("load", init, false); })(); </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。