GWT‎ > ‎

three.js

three.jsとは

公式
Canvas,WebGL,SVGのマルチレンダーが売り？のJavaScriptで3D表示するライブラリーです。

GWTベースのThree.js アプリ


Chrome Web App - BVHモーション クリエイター





私が作っているThree.js GWTのラッパー
https://github.com/akjava/gwt-three.js-test 


GWTでthree.jsを使って見ました

その１

ReadMeの例をGWTに移植して見ました。
ほとんどNativeで呼び出して、renderのdomを取り出して挿入部分と、loopのみgwtですね。

package com.akjava.gwt.threetest.client;



import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class ThreeTest implements EntryPoint {
   

    /**
     * This is the entry point method.
     */
public void onModuleLoad() {
       
    Element node=init();
    GWT.log("node:"+node);
    RootPanel.get("gl").getElement().insertFirst(node);
   
    //animation
    Timer timer=new Timer(){
        public void run(){
            render();
        }
    };
    timer.scheduleRepeating(1000/60);
       
    }

     public native Element init()/*-{

            camera = new $wnd.THREE.PerspectiveCamera( 75, $wnd.innerWidth / $wnd.innerHeight, 1, 10000 );
            camera.position.z = 1000;

            scene = new $wnd.THREE.Scene();

            geometry = new $wnd.THREE.CubeGeometry( 200, 200, 200 );
            material = new $wnd.THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

            mesh = new $wnd.THREE.Mesh( geometry, material );
            scene.add( mesh );

            renderer = new $wnd.THREE.WebGLRenderer();
            renderer.setSize( $wnd.innerWidth, $wnd.innerHeight );

            return renderer.domElement;

        }-*/;
   
    public native void render()/*-{
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        renderer.render( scene, camera );

    }-*/;
}

Comments