Three.jsを使って作品を作ってみる1
皆さんこんにちは！飯塚LSSの角です！
1Qの試験が差し迫ってきましたね...！皆さん頑張ってください！
今回は最近やりこんでいるThree.jsについて解説・制作をしていこうと思います！
Three.jsとは
Three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリです！WebGPUだけで３D表現をするには立方体1つを表示するだけでも多くのコードを書く必要があり、専門知識も必長です。Three.jsを用いると手軽に３Dコンテンツが作成できるため、手軽に扱えるようになります。MMDとかも一応扱えるらしいです。
制作してみた
今回は立方体を描画していこうと思います。まずはCDN(Content Delivery Network)経由でThree.jsをインポートします。
Three.js
//Three.jsを使えるようにする
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.module.js';
CDN経由でなくてもいいのですが...npmやnode.jsの知識が必要になってくるのでここでは割愛します。
続いてシーンとカメラを追加しましょう。
Three.js
//シーンを追加
const scene = new THREE.Scene();
//カメラを追加、視野角、アスペクト比、描画開始距離、描画終了距離
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
続いてrendererを追加して...
Three.js
//rendererを追加(カメラで撮影した3Dモデルを画面に表示するためのもの)
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
最後に立方体とアニメーションを追加すればとりあえず完成ですね！
Three.js
//立方体の追加
const cube = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshNormalMaterial()
);
scene.add(cube);
//カメラの位置を設定
camera.position.z = 5;
//アニメーションの追加
function animate(){
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
これで一旦完成しましたね！ 詳しい解説はまた別の記事でやろうと思います！ 皆さんも是非Three.jsを触れてみてください！！
Three.js
//Three.jsを使えるようにする
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.module.js';
//シーンを追加
const scene = new THREE.Scene();
//カメラを追加、視野角、アスペクト比、描画開始距離、描画終了距離
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//rendererを追加(カメラで撮影した3Dモデルを画面に表示するためのもの)
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//立方体の追加
const cube = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshNormalMaterial()
);
scene.add(cube);
//カメラの位置を設定
camera.position.z = 5;
//アニメーションの追加
function animate(){
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
所属
