Three.jsで3DCGを作ろう！〜環境マッピングでツルツル鏡面球体〜

Yuya Nishizawa

2025.02.12

Technology

新卒ブログとは？: 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。

こんにちは、新米エンジニアのにっしーです。最近Three.jsを使っている際にパソコンのスペックが足りず少し重いので、上司にお願いしてPCのスペックを上げてもらおうかと考えています。

そんなことはさておき、Webサイトでの表現の幅を広げたいと思い、Webブラウザ上で3DCGを制作することができるJavaScriptのライブラリ「Three.js」を勉強しています。

この連載では、Three.jsを使った制作物を紹介していきますので、同じようにThree.jsの勉強をされているみなさんの参考になれば幸いです！

前回は、スフィアジオメトリとテクスチャを用いた惑星とパーティクルを使用し星を作成し、宇宙空間を作成しました。まだの方はこちらもぜひご覧ください！

Three.jsで3DCGを作ろう！〜動く宇宙空間を生み出す〜

Yuya Nishizawa

2025.01.22

今回は周りの風景を反射する環境マッピングを作成しました。画面を触ることで見え方が変わるのでぜひいじくりまわしてください。

※導入方法などは端折らせていただきますので、あらかじめご了承ください。

完成系
実装方法
- 1.シーン、カメラ等もろもろを準備
- 2.メッシュを用意
今回参考にさせていただいた動画
まとめ

完成系

さっそくですが、今回作成したものがこちらです！

実装方法

1.シーン、カメラ等もろもろを準備

これは、three.jsを作る上である程度お作法のようなものなので、深掘りすることはせず準備していきます。

気になる方はこちらのブログで細かく紹介されているので、ご覧ください。

three.jsの基本をおさらいしてみよう！〜基礎の基礎編〜

はっちゃん

2016.12.02

javascript

	
	// canvasを取得
	const canvas = document.getElementById("canvas") as HTMLCanvasElement;

	if (!canvas) return;

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

	// サイズ
	const sizes = {
		width: window.innerWidth,
		height: window.innerHeight,
	};

	// カメラ
	const camera = new THREE.PerspectiveCamera(
		75,
		sizes.width / sizes.height,
		0.1,
		3000
	);

	camera.position.set(0, 500, 1000);

	scene.add(camera);

	// レンダラー
	const renderer = new THREE.WebGLRenderer({
		canvas: canvas,
		antialias: true,
	});

	renderer.setSize(sizes.width, sizes.height);
	renderer.setPixelRatio(window.devicePixelRatio);

	

	//メッシュ
	// 2で作成。
	// ブラウザのリサイズ処理
	const onWindowResize = () => {
		sizes.width = window.innerWidth;
		sizes.height = window.innerHeight;
		camera.aspect = sizes.width / sizes.height;
		camera.updateProjectionMatrix();
		renderer.setSize(sizes.width, sizes.height);
		renderer.setPixelRatio(window.devicePixelRatio);
	};

	window.addEventListener("resize", onWindowResize);

	// クリーンアップ関数
	return () => {
		window.removeEventListener("resize", onWindowResize);
		renderer.dispose();
	};

2.メッシュを用意

2-1 画像の用意

はじめに周りの風景の画像を用意していきます。

環境マッピング用の左右反転してくっついているような特殊な画像を用いるので添付のギャラリー等からダウンロードしてください。

https://polyhaven.com/hdris

私は最後に紹介している参考にさせていただいた動画からダウンロードしてきました。

2-2 画像読み込みと背景の設定

javascript

	
		// image
        const urls = [
            right.src,		 
            left.src,			 
            up.src,			 
            down.src,			 
            front.src,			 
            back.src,			 
        ];

        const loader = new THREE.CubeTextureLoader();
		
		// 背景の設定
        scene.background = loader.load(urls);

2-3.周りの風景を反射する球体の作成

これができれば完成です！

javascript

	
	 	// controls
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(500);

        // cubeCamera
        const cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);
        scene.add(cubeCamera);

        // object
        const material = new THREE.MeshBasicMaterial({
            envMap: cubeCamera.renderTarget.texture,
            // 反射率
            reflectivity: 1,
        });

        const geometry = new THREE.SphereGeometry(350, 50, 50);
        const sphere = new THREE.Mesh(geometry, material);
        scene.add(sphere);

        // レンダリング
        const animate = () => {
            controls.update();
            cubeCamera.update(renderer, scene);
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }

        animate();