アニメーション

JS（WebGL）で作るガラスの中に浮かぶ写真の3Dクリスタル

投稿日 2026/02/02

更新日 2026/1/28

写真をただ平面として表示するのではなく、
ガラスの中に閉じ込められた立体物として見せることができたら、
写真の印象は大きく変わります。

本デモでは、WebGLを使って透明なガラスオブジェクトを構築し、
その内部に写真が浮かんでいるように見える
3Dクリスタル表現を実装しました。

反射や屈折、環境光の映り込みによって、
写真は単なるテクスチャではなく、
光を受けて存在している“物体”として感じられる構成になっています。

Preview プレビュー

Code コード

CSS

body {
    margin: 0;
    overflow: hidden;
    background-color: #020202;
}
canvas {
    display: block;
}

JavaScript

import * as THREE from 'https://esm.sh/three@0.170.0';
import { OrbitControls } from 'https://esm.sh/three@0.170.0/examples/jsm/controls/OrbitControls.js';
import { RoundedBoxGeometry } from 'https://esm.sh/three@0.170.0/examples/jsm/geometries/RoundedBoxGeometry.js';
import { RGBELoader } from 'https://esm.sh/three@0.170.0/examples/jsm/loaders/RGBELoader.js';

// ==========================================
// 設定
// ==========================================

// 1. 中央に表示する写真のURL
const PHOTO_URL = 'https://kumonosu.net/wp-content/uploads/2026/01/IMG_1298.jpg.webp';

// 2. 反射させる環境マップ
const ENV_URL = 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/soliltude_1k.hdr';

const settings = {
    photoScale: 1.2,
    envIntensity: 1.5, // 反射の明るさ
    rotationSpeed: 0.5
};

// --- SCENE SETUP ---
const scene = new THREE.Scene();
scene.background = new THREE.Color('#020202');

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0, 4);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// --- 360° ENVIRONMENT (Reflections) ---
const rgbeLoader = new RGBELoader();
rgbeLoader.load(ENV_URL, (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = texture;
    scene.environmentIntensity = settings.envIntensity;
});

// --- STARK LIGHTS ---
const arcBlue = new THREE.PointLight(0x00ffff, 8, 15); 
arcBlue.position.set(2, 3, 4);
scene.add(arcBlue);

const ironRed = new THREE.PointLight(0xff0000, 6, 15); 
ironRed.position.set(-3, -2, 3);
scene.add(ironRed);

const group = new THREE.Group();
scene.add(group);

// --- PHOTO OBJECT ---
const photoMat = new THREE.MeshStandardMaterial({ 
    side: THREE.DoubleSide, 
    roughness: 0.2,
    metalness: 0.2
});
const photoMesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), photoMat);
group.add(photoMesh);

const textureLoader = new THREE.TextureLoader();
textureLoader.load(PHOTO_URL, (tex) => {
    tex.colorSpace = THREE.SRGBColorSpace;
    photoMat.map = tex;
    const aspect = tex.image.width / tex.image.height;
    const s = settings.photoScale;
    if (aspect > 1) {
        photoMesh.scale.set(s, s / aspect, 1);
    } else {
        photoMesh.scale.set(s * aspect, s, 1);
    }
});

// --- GLASS OBJECT ---
const glassMat = new THREE.MeshPhysicalMaterial({
    color: 0xffffff,
    transmission: 1.0,
    thickness: 1.0,
    ior: 1.5,
    roughness: 0.0,
    metalness: 0.1,
    transparent: true,
    envMapIntensity: 2.2 
});

const glassMesh = new THREE.Mesh(new RoundedBoxGeometry(2.1, 2.1, 0.8, 32, 0.2), glassMat);
group.add(glassMesh);

// --- ANIMATION LOOP ---
const clock = new THREE.Clock();

function animate() {
    requestAnimationFrame(animate);
    const time = clock.getElapsedTime();

    group.rotation.y += 0.005 * settings.rotationSpeed; 
    group.rotation.x = Math.sin(time * 0.4) * 0.1;
    
    arcBlue.intensity = 6 + Math.sin(time * 2) * 2;

    controls.update();
    renderer.render(scene, camera);
}

animate();

window.onresize = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
};