360度画像を表示する（HTML/JS）
前書き
360度画像を表示する方法を掲載しています。
目次
- 360度画像を表示する
- 環境マッピングを追加する
- 参考
360度画像を表示する
球体の表面に画像を貼り付ける
球体の表面を内側に向ける
球体の内側にカメラを設置
下記ページを参考にthree.jsを使って表示しています
three.js
お手軽360°パノラマ制作入門！JSでパノラマビューワーを自作しよう
使用している画像
<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でパノラマビューワーを自作しよう
関連記事
