topical media & game development
graphic-webgl-scenejs-examples-seymour-plane-seymour-plane-json-scene.js / js
/*
Seymour Plane Test Model
Lindsay S. Kay,
lindsay.kay@xeolabs.com
V0.7.8 introduced a JSON API, with which scene graphs and models (such as the Seymour Plane in this example) can
be constructed and processed outside of a browser that supports WebGL - unlike JavaScript scenes. JSON is also
repurposable, and makes better sense for server-client transport. Also, looking to the long-term roadmap, it decouples
scene definitions from the SceneJS API.
Latest class API Docs are at: http://www.scenejs.org/api-docs.html
*/
SceneJS.createScene({
type: "scene",
id: "myScene",
canvasId: "theCanvas" , // Bind to canvas
loggingElementId: "theLoggingDiv", // Log to DIV
nodes: [
{
type: "lookAt",
id: "theLookat",
eye : { x: -1.0, y: 0.0, z: 15 },
look : { x: -1.0, y: 0, z: 0 },
up : { y: 1.0 },
nodes: [
{
type: "camera",
optics: {
type: "perspective",
fovy : 55.0,
aspect : 1.47,
near : 0.10,
far : 300.0
},
nodes: [
{
type: "light",
mode: "dir",
color: { r: 1.0, g: 1.0, b: 1.0 },
dir: { x: 1.0, y: -0.5, z: -1.0 },
diffuse: true,
specular: true
},
{
type: "light",
mode: "dir",
color: { r: 1.0, g: 1.0, b: 1.0 },
dir: { x: -1.0, y: -0.5, z: -3.0 },
diffuse: true,
specular: true
},
{
type: "rotate",
id: "yaw",
angle : 0.0 ,
y : 1.0,
nodes: [
{
type: "rotate",
id: "pitch",
angle : 30.0,
x : 1.0,
nodes: [
/* Integrate our airplane model, defined in seymour-plane-model.js,
* which was loaded via a <script> tag in index.html.
*/
planeJSON
]
}
]
}
]
}
]
}
]
});
/*----------------------------------------------------------------------
* Disable scene graph compilation (disabled by default in V0.8).
*
* This feature is alpha status and may break some scene graphs.
*
* It can speed your scene graph up by an order of magnitude - we'll
* do it here just to show how it's done.
*
* http://scenejs.wikispaces.com/V0.8+Branch
*---------------------------------------------------------------------*/
SceneJS.setDebugConfigs({
compilation : {
enabled : false
}
});
var pInterval;
var yaw = 305;
var pitch = 10;
var lastX;
var lastY;
var dragging = false;
var canvas = document.getElementById("theCanvas");
function mouseDown(event) {
lastX = event.clientX;
lastY = event.clientY;
dragging = true;
}
function touchStart(event) {
lastX = event.targetTouches[0].clientX;
lastY = event.targetTouches[0].clientY;
dragging = true;
}
function mouseUp() {
dragging = false;
}
function touchEnd() {
dragging = false;
}
function mouseMove(event) {
var posX = event.clientX;
var posY = event.clientY;
actionMove(posX,posY);
}
function touchMove(event) {
var posX = event.targetTouches[0].clientX;
var posY = event.targetTouches[0].clientY;
actionMove(posX,posY);
}
function actionMove(posX, posY) {
if (dragging) {
yaw += (posX - lastX) * 0.5;
pitch += (posY - lastY) * 0.5;
lastX = posX;
lastY = posY;
var scene = SceneJS.scene("myScene");
scene.findNode("pitch").set("angle", pitch);
scene.findNode("yaw").set("angle", yaw);
}
}
canvas.addEventListener('mousedown', mouseDown, true);
canvas.addEventListener('mousemove', mouseMove, true);
canvas.addEventListener('mouseup', mouseUp, true);
canvas.addEventListener('touchstart', touchStart, true);
canvas.addEventListener('touchmove', touchMove, true);
canvas.addEventListener('touchend', touchEnd, true);
SceneJS.scene("myScene").start();
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.