LoginSignup
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@may88seiji

初めてのThree.js 1章

Last updated at Posted at 2017-11-07

はじめに

three.jsを学ぶため、
オライリー本「初めてのThree.js」をまとめることで内容を咀嚼していこう思う。
今回は第一章の途中まで。

picture978-4-87311-770-6.gif

初めてのThree.js 第2版
――WebGLのためのJavaScript 3Dライブラリ

github learning-three-js-2e-ja-support

はじめのまとめ

  • HTMLスケルトンの作成
  • code sample
  • カメラ　ライト　描画したいオブジェクトを追加

HTMLスケルトンの作成

Three.jsを出力する空のスケルトンHTMLを作成
(＊Three.jsはサーバー環境でないと動きません。)

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Example 01.01 - Basic skeleton</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to
             use the complete page */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
    // once everything is loaded, we run our Three.js stuff.
    function init() {
        // here we'll put the Three.js stuff
    }
    window.onload = init;
</script>
</body>
</html>
  • <head>要素内でThree.jsをロード(CDNはこちら)
  • styleでスクロールバー除去
  • <div id="WebGL-output">でThree.jsレンダラーの出力を表示、保持する
  • window.onload = init;でjsを呼び出す

code sample

index.html
<script type="text/javascript">
    // once everything is loaded, we run our Three.js stuff.
    function init() {
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();
        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth, window.innerHeight);
        // show axes in the screen
        var axes = new THREE.AxisHelper(20);
        scene.add(axes);
        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 20);
        var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;
        // add the plane to the scene
        scene.add(plane);
        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        // position the cube
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;
        // add the cube to the scene
        scene.add(cube);
        // create a sphere
        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        // position the sphere
        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;
        // add the sphere to the scene
        scene.add(sphere);
        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);
        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);
        // render the scene
        renderer.render(scene, camera);
    }
    window.onload = init;
</script>

以下、部分解説

scene camera renderer　を定義する

three.js
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth, window.innerHeight);
  • scene オブジェクト
    表示したいすべての物体光源を保持して変更を監視するコンテナオブジェクト
  • camera オブジェクト
    シーンを描画する時に何が見えるか決定する
  • renderer オブジェクト
    cameraオブジェクトの角度に基づいてブラウザ内でsceneオブジェクトがどのように見えるのか計算する
    ここではTHREE.WebGLRenderer()をつかって描画　　
    setClearColor関数を使って色を設定
    setSize関数で描画するシーンの大きさをrendererに通知

座標と平面を追加する

three.js
        // show axes in the screen
        var axes = new THREE.AxisHelper(20);
        scene.add(axes);

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 20);
        var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);
  • 座標軸
    axesオブジェクトを作成してscene.add関数でシーンに追加する
  • 平面
    平面を追加するにはどのような平面（幅、高さ）であるか、なに色であるか設定する必要がある(planeGeometry planeMaterialで定義)
    これら二つを組み合わせてTHREE.Meshでplaneというオブジェクトを作成
    次に配置を決める
    rotation.xで平面を90度傾ける
    x y z の位置を決めてscene.add(plane)でシーンに追加する

カメラの位置を設定する

three.js
        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // render the scene
        renderer.render(scene, camera);

position.x position.y position.z を使って位置を設定する
camera.lookAt(scene.position);でlookAt関数を使ってシーンの中心を向くように指定（デフォルトで(0,0,0)に位置）

あとはjsのappendChild関数でdiv要素に追加
最後にrendererに描画の指示をする。

今回はここまで。
次はマテリアル、ライト、影の追加の部分について書きます。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?