見出し画像

Three.jsでお絵かきをしてみました

地図アート研究所

今夜はJavaScriptのコードで３Dを描くおべんきょ。3Dお絵描きライブラリのThree.jsをつかって、箱と玉を描いてみました。こちらからWeb上で見れます。

https://threejs-test1.glitch.me/

最初は、テキストエディタVScodeでjavascriptを変更して保存 ⇒ Webブラウザ F5で更新して、お絵描きの内容を変更しては確認をしていたのですが、Glitchの画面でテキストエディタとブラウザのプレビューがあり、エディタでスクリプトを書き換えると、プレビューが自動更新されるので、パラメータを変えて３Dで遊ぶのに便利な事に気づきました。こんな感じの表示です。

画像1

「初めてのThree.js」の13ページを参考にして、HTMLの中にJavaScriptを直書きしています。

スクリプトはこちらです。Example 01.02のスクリプトのコメントを翻訳して、色や形状のパラメータを少し変更しています。

<!DOCTYPE html>

<html>
 <head>
   <title>Example 01.02 - First Scene</title>
   <script type="text/javascript" src="./three.js"></script>
   <style>
     body {
       /* フルスクリーンにするために、marginを0に、overflowをhiddenに設定 */
       margin: 0;
       overflow: hidden;
     }
   </style>
 </head>
 <body>
   <!-- 出力を保持するdiv -->
   <div id="WebGL-output"></div>

   <!-- Three.jsの例を実行するJavascriptコード -->
   <script type="text/javascript">
     // すべてがロードされたら、Three.jsのものを実行
     function init() {
       // オブジェクト、カメラ、ライトなどのすべての要素を保持するシーンを作成
       var scene = new THREE.Scene();

       // 画面の視野を定めるカメラを作成
       var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

       // レンダラーを作成し、シーン全体のサイズを設定
       var renderer = new THREE.WebGLRenderer();
       renderer.setClearColor(new THREE.Color(0x111111)); // 0x111111 ほぼ真っ黒
       renderer.setSize(window.innerWidth, window.innerHeight);

       // 画面に軸を表示
       var axes = new THREE.AxisHelper(20);
       scene.add(axes);

       // グランド平面を作成
       var planeGeometry = new THREE.PlaneGeometry(50, 30);
       var planeMaterial = new THREE.MeshBasicMaterial({ color: 0x333333 });
       var plane = new THREE.Mesh(planeGeometry, planeMaterial);

       // 平面を回転および配置
       plane.rotation.x = -0.5 * Math.PI;  //x方向に-90度回転　回転前は法線ベクトルが(0, 0, 1)
       plane.position.x = 10;
       plane.position.y = -0.1;
       plane.position.z = 0;

       // 平面をシーンに追加
       scene.add(plane);

       // 立方体を作成
       var cubeGeometry = new THREE.BoxGeometry(8, 8, 8);
       var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff3333, wireframe: true});
       var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

       // 立方体を配置
       cube.position.x = -5;
       cube.position.y = 4;
       cube.position.z = 0;


       // 立方体をシーンに追加
       scene.add(cube);

       // 球を作成
       var sphereGeometry = new THREE.SphereGeometry(5, 20, 20); // 直径, 経度方向分割数, 緯度方向分割数
       var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x3333ff, wireframe: true});
       var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

       // 球を配置します
       sphere.position.x = 20;
       sphere.position.y = 5;
       sphere.position.z = 1;

       // 球をシーンに追加します
       scene.add(sphere);

       // カメラをシーンの中心に向けて配置します
       camera.position.x = -30;
       camera.position.y = 40;
       camera.position.z = 30;
       camera.lookAt(scene.position);

       // レンダラーの出力をhtml要素に追加します
       document
         .getElementById("WebGL-output")
         .appendChild(renderer.domElement);

       // シーンをレンダリングする
       renderer.render(scene, camera);
     }
     window.onload = init;
   </script>
 </body>
</html>

この記事が気に入ったらサポートをしてみませんか？