three.jsで遊びはじめて3日ほどですが、簡単なものを試す機会が出てきました。簡単なオブジェクトを生成するだけでもブラウザのリサイズに対応したrenderer、camera、sceneや生成したオブジェクトをあらゆる角度から見るのに役立つOrbitControlsやGUIデバッグをするためにlil-guiを導入したくなります。今回は、これらを用意したテンプレートを備忘録として残します。

three.jsで遊ぶ際のテンプレ

以下のテンプレはthree.js側のコードを切り出したものになっています。


import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import * as dat from "lil-gui"

/**
 * Base
 */
//Debug
const gui = new dat.GUI()

//Canvas
const canvas = document.querySelector("canvas.webgl")

//Scene
const scene = new THREE.Scene()

/**
 * Box
 */
const box = new THREE.Mesh(
	new THREE.BoxGeometry(2, 2, 2),
	new THREE.MeshBasicMaterial({ color: "#ffffff" })
)
scene.add(box)

/**
 * Light
 */
//Ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3)
gui.add(ambientLight, "intensity").min(0).max(1).step(0.001)
scene.add(ambientLight)
/**
 * Sizes
 */
const sizes = {
	width: window.innerWidth,
	height: window.innerHeight,
}

window.addEventListener("resize", () => {
	//Update sizes
	sizes.width = window.innerWidth
	sizes.height = window.innerHeight

	// Update camera
	camera.aspect = sizes.width / sizes.height
	camera.updateProjectionMatrix()

	//Update renderer
	renderer.setSize(sizes.width, sizes.height)
	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
//Base camera
const camera = new THREE.PerspectiveCamera(
	75,
	sizes.width / sizes.height,
	0.1,
	1000
)
camera.position.x = 1
camera.position.y = 1
camera.position.z = 5
scene.add(camera)

//Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
	canvas: canvas,
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () => {
	const elapsedTime = clock.getElapsedTime()

	//Update controls
	controls.update()

	//Render
	renderer.render(scene, camera)

	//Call tick again on thre next frame
	window.requestAnimationFrame(tick)
}

tick()

まとめ

three.jsの学習を初めて3日目ほどで得た、現時点でのテンプレを載せました。とりあえずは、影や物理現象を考慮した環境を作ってみたいと思うのでコツコツ遊びながらやっていければと思います。

one_milliのブログ

three.jsのテンプレ

目次

概要

three.jsで遊ぶ際のテンプレ

まとめ