NewApplication
Let's do few easy steps to create a first 3D Scene.
Project name: getting_started
Package: com.example.myproject
Download the latest Parallax library and Install it into your new project.
In the package com.example.myproject create GWT configuration file: Myproject.gwt.xml
with the following content:
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to="example">
<!-- Inherit the some stuff. -->
<inherits name='com.google.gwt.user.User'/>
<inherits name="thothbot.parallax.core.Core"/>
<!-- Specify the app entry point class. -->
<entry-point class='com.example.myproject.client.Myproject'/>
<source path='client'/>
</module>Lets create our Entry-point class Myproject.java in the package com.example.myproject.client
package com.example.myproject.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootLayoutPanel;
public class Myproject implements EntryPoint {
@Override
public void onModuleLoad() {
// TODO Auto-generated method stub
RootLayoutPanel.get().add(new Label("Its worked"));
}
}Ok, then in the folder war put the file Myproject.html with the following content:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My project</title>
<script type="text/javascript" language="javascript" src="myproject/myproject.nocache.js"></script>
</head>
<body />
</html>Then you need to configure war/WEB-INF/web.xml
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>Myproject.html</welcome-file>
</welcome-file-list>
</web-app>Then for testing run the application and open the URL http://127.0.0.1:8888/Myproject.html?gwt.codesvr=127.0.0.1:9997.
You should see Its worked in the browser window.
Add the following code in the class Myproject.java:
class MyScene extends AnimatedScene {
@Override
protected void onStart() {
// Called before the animation starts. The Scene should be defined here.
}
@Override
protected void onUpdate(double duration) {
// Called when the animation should be updated.
}
}Ok, lets create a default camera which the renderer will use in the animation.
PerspectiveCamera camera;
@Override
protected void onStart() {
// Loads default camera for the Animation
camera = new PerspectiveCamera(
70, // field of view
getRenderer().getAbsoluteAspectRation(), // aspect ratio
1, // near
1000 // far
);
}The first parameter passed determines how wide the field of view is. The second parameter is the aspect ratio which is calculated by dividing the viewing area's width by its height. The third and fourth parameters specify cut-off points for objects in the camera's view. If an object's distance from the camera does not fall in the range between NEAR and FAR then that object is not rendered.
Then we should set up the Scene in the onStart() method too. Lets create a red wireframe cube that is 200 units wide, tall and deep, adds the Mesh basic material, and adds it to the scene.
class MyScene extends AnimatedScene {
private Mesh mesh;
/* .... skipped .... */
@Override
protected void onStart() {
// Loads default camera for the Animation
camera = new PerspectiveCamera(
70, // field of view
getRenderer().getAbsoluteAspectRation(), // aspect ratio
1, // near
1000 // far
);
camera.getPosition().setZ(400);
BoxGeometry geometry = new BoxGeometry( 200, 200, 200 );
MeshBasicMaterial material = new MeshBasicMaterial();
material.setColor( new Color(0xFF0000) );
material.setWireframe( true );
this.mesh = new Mesh(geometry, material);
getScene().add(mesh);
}
}The second statement sets the camera's Z coordinates. Then we created material, mesh object and added it into scene.
Ok, lets animate the cube. Updated method onUpdate(double duration) in the MyScene class as the following:
@Override
protected void onUpdate(double duration) {
this.mesh.getRotation().addX(0.005);
this.mesh.getRotation().addY(0.01);
getRenderer().render(getScene(), camera);
}##Adding RenderingPanel widget
And the final action is to add RenderingPanel widget to the Myproject.java class and connect it with the MyScene class. Just add the following code to the onModuleLoad() method:
@Override
public void onModuleLoad() {
RenderingPanel renderingPanel = new RenderingPanel();
// Background color
renderingPanel.setBackground(0x111111);
renderingPanel.setAnimatedScene(new MyScene());
RootLayoutPanel.get().add(renderingPanel);
}That's it! Lets start the project and see what we have. You should see something like this
Please note: rendering in GWT development mode will be a little bit slow. You should compile the project to have good frame rate.!