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

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

ただいまの
回答率

91.36%

  • JavaScript

    11206questions

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

  • HTML5

    2842questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1476questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • jQueryプラグイン

    319questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

RICOH THETAの画像をweb上で表示したい

受付中

回答 1

投稿 2017/11/26 12:01 ・編集 2017/12/01 00:01

  • 評価
  • クリップ 0
  • VIEW 346

html5x

score 4

RICOH THETAの画像をウェブ上で表示するため、
https://qiita.com/kingpanda/items/1c3a47765b40d6d62f46
を参考に,three.jsを使ってコード作成したのですが、うまく動きません。
以下の点について教えてください。
オリジナルのソースは
https://github.com/king-panda/panorama
にあります。

1.オリジナルのままだと、画像がフルスクリーンになるため、
window.innerWidthとwindow.innerHeightを1/4にしました。
変更すると画像は小さくなりますが、スマホを横にしたあと縦に戻すと、フル画面になってしまいます。
また、下にスクロールした途端画面が拡大されてしまいます。
画像サイズを一定にする(画面比率に応じて固定)にはどうすればいいでしょうか?

2.違う画像を複数配置(パソコンだと横に3つ、スマホだと縦に3つ並ぶようにしたい)のですが、
どうコーディングすれば可能でしょうか。

よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Panorama Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width">
    <link href="bootstrap.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap.js"></script>
  </head>
  <body>

<div class="container">
   <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
          <div id="stage" class="img-responsive"></div>
            <div class="caption">
              <h3>Product</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
        </div>
      </div>
</div>

  <script src="three.min.js"></script>
  <script src="OrbitControls.js"></script>


<script>
(function(){

  var width = window.innerWidth/4,
      height = window.innerHeight/4;

  //scene

  var scene = new THREE.Scene();

  //mesh

  var geometry = new THREE.SphereGeometry( 5, 60, 40 );
    geometry.scale( - 1, 1, 1 );

    var material = new THREE.MeshBasicMaterial( {
       map: THREE.ImageUtils.loadTexture( 'test.jpg' )
    } );

    sphere = new THREE.Mesh( geometry, material );

    scene.add( sphere );

  //camera

  var camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);
  camera.position.set(0,0,0.1);
  camera.lookAt(sphere.position);

  //helper

  var axis = new THREE.AxisHelper(1000);
  axis.position.set(0,0,0);
  scene.add(axis);

  //render

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width,height);
  renderer.setClearColor({color: 0x000000});
  document.getElementById('stage').appendChild(renderer.domElement);
  renderer.render(scene,camera);

  //control

  var controls = new THREE.OrbitControls(camera,renderer.domElement);


  function render(){

    requestAnimationFrame(render);
    sphere.rotation.y += 0.05 * Math.PI/180;
    window.addEventListener( 'resize', onWindowResize, false );
    renderer.render(scene,camera);
    controls.update();
  }
  render();

  function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }


})();


  </script>
  </body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

別の実装方法でも良ければ、過去に調べてjQueryのライブラリとなっているものを用いて表示が可能だったことがあります。
記事にしてありますので、こちらをご参考ください。
https://qiita.com/sakapun/items/477c54c33a1d942d127f

投稿 2017/12/01 00:16

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/04 10:41

    当方の画像を使用すると、パソコンでは表示されるのですが、iphone で表示されません。真っ黒です。
    デモの画像は再生されるのですが、何が原因でしょうか?

    https://github.com/stomita/ios-imagefile-megapixel/issues/41

    キャンセル

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

ただいまの回答率

91.36%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11206questions

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

  • HTML5

    2842questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1476questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • jQueryプラグイン

    319questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。