節約テクノロジ >

Three.jsでHelloWorld〜18行で書けるiOS対応3Dプログラム

目次

  1. ソースコード
  2. 解説
  3. 参考リンク

Hello World!

マウスやフリックで動かせます

ソースコード

<!DOCTYPE html>
<html>
    <body>
        <div id='container' ></div>
        <h2 id='hello'>Hello World!</h2>

        <script src='https://rawgithub.com/mrdoob/three.js/master/build/three.min.js' ></script>
        <script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
        <script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script>

        <script>
            var SCREEN_WIDTH=320
            var SCREEN_HEIGHT=240

            renderer = new THREE.CSS3DRenderer()
            renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT)
            document.getElementById("container").appendChild(renderer.domElement)

            var camera=new THREE.PerspectiveCamera(45,SCREEN_WIDTH/SCREEN_HEIGHT,1,10000)
            var hello = new THREE.CSS3DObject(document.getElementById('hello'))

            var scene=new THREE.Scene()
            scene.add(camera)
            scene.add(hello)

            camera.position.z=200
            controls=new THREE.TrackballControls(camera,renderer.domElement)

            function render(){
                requestAnimationFrame(render)
                renderer.render(scene,camera)
                controls.update()
            }

            render()
        </script>
    </body>
</html>

解説

Three.jsはHTML/JavaScript用の3Dライブラリです。特徴はレンダラをWebGL/Canvas/SVG/CSS3から選べることでしょう。パフォーマンスが要求される場合はWebGLで、iOSなどでも動かしたい場合は互換性の高いCanvas/SVGでと目的に応じて選ぶことができます。

特にCSS3のレンダラであるCSS3Renderer.jsはDOMエレメントを3Dオブジェクトとして配置できるので気軽に3Dを試したい時や写真要素などを3Dにビジュアライズしたい時に便利です。

ここではThree.jsの雰囲気を味わう為にCSS3Renderer.jsを使った最小のHelloWorldを紹介します。頭の方にHelloWorld!のH2タグがあります。これがThree.jsとCSS3Renderer.jsによって3D化されます。

またマウスやフリックで手軽にカメラを動かせるTrackballControls.jsも使われています。実質2行のコードを入れるだけで配置したオブジェクトをグリグリまわすことが出来ます。

参考リンク

ここでは最小サンプルを作る為に一般的なThree.jsソフトウェアにある処理を省いています。さらに深く学びたい方は以下のリンクが参考になります。特にperiodic tableのデモは圧巻です。これだけの表現をわずかなコード量で出来てしまうのがThree.js/CSS3DRenderer.jsです。

この記事を見た人がよく読んでいる記事

節約テクノロジ >

トップページ

節約テクノロジ > Three.jsでHelloWorld〜18行で書けるiOS対応3Dプログラム