質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2241閲覧

three.js 読み込み時のズーム設定について

sawareco

総合スコア18

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/01/16 02:13

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

無事、自己解決しました。

投稿2021/07/18 08:03

sawareco

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問