360度画像を表示する（HTML/JS）

前書き

360度画像を表示する方法を掲載しています。

目次

  1. 360度画像を表示する
  2. 環境マッピングを追加する
  3. 参考

360度画像を表示する

球体の表面に画像を貼り付ける
球体の表面を内側に向ける
球体の内側にカメラを設置

下記ページを参考にthree.jsを使って表示しています

three.js
お手軽360°パノラマ制作入門！JSでパノラマビューワーを自作しよう

使用している画像

無料写真素材なら【写真AC】
 

<div class="wrap js-wrap-a">
  <canvas class="canvas js-canvas"></canvas>
</div>


.wrap{
  position: relative; padding: 75% 0 0; overflow: hidden;
}
.canvas{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}


import * as THREE from './three_r127/build/three.module.js';
import { OrbitControls } from './three_r127/examples/jsm/controls/OrbitControls.js';

// サイズ------------------
const wrap = document.querySelector(".js-wrap-a");
let wrapWidth = wrap.clientWidth;
let wrapHeight = wrap.clientHeight;

// レンダラー------------------
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector(".js-canvas")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(wrapWidth, wrapHeight);

// シーン------------------
const scene = new THREE.Scene();

// カメラ------------------
const camera = new THREE.PerspectiveCamera(75, wrapWidth / wrapHeight, 1, 1000);
camera.position.set(0, 0, 1);

// カメラコントローラーを作成
const controls = new OrbitControls( camera, renderer.domElement );
controls.autoRotate = true; // 自動回転をONにする
controls.autoRotateSpeed = 0.5; // 自動回転の速度
controls.enableDamping = true; // 視点操作のイージングをONにする
controls.dampingFactor = 0.2; // 視点操作のイージングの値
controls.rotateSpeed = 0.5; // 視点変更の速さ
controls.enableZoom = false; // ズーム禁止
controls.enablePan = false; //水平垂直移動の禁止

// 光源------------------
const aLight = new THREE.AmbientLight(0xffffff, 1); // 環境光源
scene.add(aLight);

// テクスチャー------------------
const loader = new THREE.TextureLoader();
const texture = loader.load( '01.jpg' );

// 物体------------------
//球体
const sphere = new THREE.Mesh(
  new THREE.IcosahedronGeometry( 10, 15 ),
  new THREE.MeshPhongMaterial({
    map: texture
  }),
);
sphere.geometry.scale(-1, 1, 1); //表面を内側に向ける
scene.add(sphere);

//リサイズ------------------
const wrapResize = () =>{
  wrapWidth = wrap.clientWidth;
  wrapHeight = wrap.clientHeight;
  renderer.setSize(wrapWidth, wrapHeight);
  // camera.aspect = wrapWidth / wrapHeight;
  // camera.updateProjectionMatrix();
}

//一定時間毎に処理------------------
let tick;
const switching = (e) => {
  if( e[0].isIntersecting ){ //見えてる時
    tick = () => {
      wrapResize(); //リサイズ
      controls.update(); //カメラコントローラー
      renderer.render(scene, camera); //レンダリング
      requestAnimationFrame( tick ); //繰り返し
    }
    requestAnimationFrame( tick );
  }else{ //見えてない時
    tick = () => {
      cancelAnimationFrame( tick )
    }
  }
}

//見えているかどうか（Intersection Observer API）------------------
const createObserver = () => {
  let observer;
  const options = { root: null, rootMargin: "0%", threshold: 0 };
  observer = new IntersectionObserver(switching, options); //コールバック関数とオプションを渡す
  observer.observe(wrap); //要素の監視を開始
}
createObserver();

環境マッピングを追加する

球体の表面に画像を貼り付ける
球体の外側にカメラを設置
シーンの背景に画像を貼り付ける

下記ページを参考にしています

three.js examples 

<div class="wrap js-wrap-b">
  <canvas class="canvas js-canvas02"></canvas>
</div>


.wrap{
  position: relative; padding: 75% 0 0; overflow: hidden;
}
.canvas{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}


import * as THREE from './three_r127/build/three.module.js';
import { OrbitControls } from './three_r127/examples/jsm/controls/OrbitControls.js';

// サイズ------------------
const wrap = document.querySelector(".js-wrap-b");
let wrapWidth = wrap.clientWidth;
let wrapHeight = wrap.clientHeight;

// レンダラー------------------
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector(".js-canvas02")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(wrapWidth, wrapHeight);

// テクスチャ―------------------
const loader = new THREE.TextureLoader();
const textureA = loader.load( '01.jpg' );
textureA.mapping = THREE.EquirectangularReflectionMapping; //反射
const textureB = loader.load( '01.jpg' );
textureB.mapping = THREE.EquirectangularRefractionMapping; //屈折

// シーン------------------
const scene = new THREE.Scene();
scene.background = textureA; //背景

// カメラ
const camera = new THREE.PerspectiveCamera( 70, wrapWidth / wrapHeight, 1, 100000 );
camera.position.set( 0, 0, 1000 );

// カメラコントローラーを作成
const controls = new OrbitControls( camera, renderer.domElement );
controls.autoRotate = true; // 自動回転をONにする
controls.autoRotateSpeed = 0.5; // 自動回転の速度
controls.enableDamping = true; // 視点操作のイージングをONにする
controls.dampingFactor = 0.2; // 視点操作のイージングの値
controls.rotateSpeed = 0.5; // 視点変更の速さ
controls.enableZoom = false; // ズーム禁止
controls.enablePan = false; //水平垂直移動の禁止

// 光源------------------
const ambient = new THREE.AmbientLight( 0xffffff, 1); // 環境光源
scene.add( ambient );

//物体------------------
//球体A
const sphereA = new THREE.Mesh(
  new THREE.IcosahedronGeometry( 250, 15 ),
  new THREE.MeshStandardMaterial({
    envMap: textureA,
    envMapIntensity: 1.0,
    metalness: 1.0,
    roughness: 0,
  })
);
sphereA.position.x = -350;
scene.add( sphereA );

//球体B
const sphereB = new THREE.Mesh(
  new THREE.IcosahedronGeometry( 250, 15 ),
  new THREE.MeshLambertMaterial({
    envMap: textureB
  })
);
sphereB.position.x = 350;
scene.add( sphereB );

//リサイズ------------------
const wrapResize = () =>{
  wrapWidth = wrap.clientWidth;
  wrapHeight = wrap.clientHeight;
  renderer.setSize(wrapWidth, wrapHeight);
  // camera.aspect = wrapWidth / wrapHeight;
  // camera.updateProjectionMatrix();
}

//一定時間毎に処理------------------
let tick;
const switching = (e) => {
  if( e[0].isIntersecting ){ //見えてる時
    tick = () => {
      wrapResize(); //リサイズ
      controls.update(); //カメラコントローラー
      renderer.render(scene, camera); //レンダリング
      requestAnimationFrame( tick ); //繰り返し
    }
    requestAnimationFrame( tick );
  }else{ //見えてない時
    tick = () => {
      cancelAnimationFrame( tick )
    }
  }
}

//見えているかどうか（Intersection Observer API）------------------
const createObserver = () => {
  let observer;
  const options = { root: null, rootMargin: "0%", threshold: 0 };
  observer = new IntersectionObserver(switching, options); //コールバック関数とオプションを渡す
  observer.observe(wrap); //要素の監視を開始
}
createObserver();

参考

お手軽360°パノラマ制作入門！JSでパノラマビューワーを自作しよう

無料写真素材なら【写真AC】

three.js examples

関連記事

簡単な地図を自作する（HTML/CSS/JS）

パーティクルを作成する（HTML/JS）

文字を立体で表示する（HTML/CSS/JS）

うにょうにょ動かす（HTML/CSS/JS）

円を描くように要素を動かす（HTML/CSS/JS）

マウスの位置に合わせて要素を動かす（HTML/CSS/JS）

この記事は役に立ちましたか？
送信中
トップページ
記事一覧
分類
@HTMLコーディング
@素読
@社会
@旅行
@端末
タグ
#動き#フォント#切り抜き、色#three.js#部品#スクロール#配置#レスポンシブ#表示速度#データ#PHP#縦書き
#教訓#詔#和歌#祝詞
#拉致事件#国土
#慰霊#パソコンの使い方
日本製まとめサイト ホームページ制作
↑先頭に戻る
↑目次に戻る
ページの先頭に戻る