いきなり立方体を出してみました。
今回作成したものです。
ブラウザで3Dモデルを表示できる「three.js」を紹介します。
three.jsってなに
three.jsとはWebGLを扱うjavascriptのライブラリーです。WebGLとはブラウザで3Dコンピュータグラフィックを扱うためのものです。
WebGLは基本的にHTML5のCanvas要素に表示を行います。
詳細は以下のサイトを確認してみてください。
three.js – JavaScript 3D library
今回の作成物
今回は最初ということで、とりあえず立方体を出してみようと思います。基本的にはシーンという描画する場所、物体(メッシュ)、カメラの3要素を駆使して描画していきます。
<bodys> // three.jsを読み込んでいます。 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script> <canvas id="CanvasArea"></canvas> <script> window.addEventListener('DOMContentLoaded', init); function init() { // レンダーを作成 const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#CanvasArea') }); // 表示するサイズを決定しています。 const width = 500; const height = 400; renderer.setPixelRatio(window.devicePixelRatio); // サイズをセット renderer.setSize(width, height); // シーンを作成 const scene = new THREE.Scene(); // カメラを作成 (遠近法が適用されるカメラ) const camera = new THREE.PerspectiveCamera(45, width / height,1,2000); // カメラの位置をセット camera.position.y = 1000; camera.position.z = 1000; camera.position.x = 1000; // 原点を向くようにカメラを設定 camera.lookAt(new THREE.Vector3(0, 0, 0)); // 箱を作成 const geometry = new THREE.BoxGeometry(500, 500, 500); const material = new THREE.MeshStandardMaterial({color: 0xF700FF}); const box = new THREE.Mesh(geometry, material); scene.add(box); // 平行光源を作成 const light = new THREE.DirectionalLight(0xFFFFFF); light.intensity = 2; // 光の強さを2に設定 light.position.set(1000, 1200, 1500); //光源の位置を設定 // シーンに光源を追加 scene.add(light); // 描画 renderer.render(scene, camera); } </script> </bodys>こんな感じで割と簡単に3Dオブジェクトを置くことができました。
まとめ
今回は「three.js」というjavascriptライブラリーを用いて表現してみました。
まずは立方体を出しただけですが、もう少し勉強してカメラを自由に動かしたり、複雑な動きもできるようです。
また進捗が出た時に更新します。
リンク