![見出し画像](https://assets.st-note.com/production/uploads/images/57401281/rectangle_large_type_2_5ac33e89587336d94b0817146ad46607.png?width=800)
【Three.js】シンプルなサンプルコードをローカルで動かしてみる
数年前にThree.jsの存在を知りました。面白そうだなと感じて触ってみたのですが、あまりものにならずそのまま放置していました。
最近また勉強してみようかなーと思い始め、少しずつ触っています。
ローカルで動かしてみる
シンプルなものであればローカルでも動作させることができます。
今回はこちらのサンプルコードを動かすところからやってみたいと思います。
適当な場所に hoge フォルダを作成し、その中に fuga_1.html を作成します。
fuga_1.html の中身
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// ページの読み込みを待つ
window.addEventListener('load', init);
function init() {
// サイズを指定
const width = 960;
const height = 540;
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#myCanvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);
// 箱を作成
const geometry = new THREE.BoxGeometry(400, 400, 400);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry, material);
scene.add(box);
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
box.rotation.y += 0.01;
renderer.render(scene, camera); // レンダリング
requestAnimationFrame(tick);
}
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
three.js のバージョンを r128 にしたのと、インデントを少し弄ったくらいで他は元のサンプルコードそのままです。
動作確認
できあがったら fuga_1.html を Chrome あたりのブラウザで開いてみましょう。
黒い背景に立方体が横向きに回転しているのが表示されればOKです。
Three.js に関する部分を別ファイルに切り出す
複雑なものを作ろうとすると script タグの中身がどんどん長くなっていきます。そうすると html ファイル自体が大きくなって管理しづらくなるので、Three.js に関する部分を別ファイルに切り出してみましょう。
hoge フォルダの中に fuga_2.html と piyo.js を作成します。
fuga_2.html の中身
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="piyo.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
script タグの中身を削除して、代わりに piyo.js を指定しています。
だいぶスッキリしましたね。
piyo.js の中身
// ページの読み込みを待つ
window.addEventListener('load', init);
function init() {
// サイズを指定
const width = 960;
const height = 540;
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#myCanvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);
// 箱を作成
const geometry = new THREE.BoxGeometry(400, 400, 400);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry, material);
scene.add(box);
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
box.rotation.y += 0.01;
renderer.render(scene, camera); // レンダリング
requestAnimationFrame(tick);
}
}
script タグの中身そのままですね。
動作確認
fuga_2.html をブラウザで開いてみましょう。
同じように回転する立方体が表示されればOKです。
この記事が気に入ったらサポートをしてみませんか?