topical media & game development
graphic-webgl-scenejs-examples-custom-geometry-custom-geometry.js / js
/*
Defining custom geometry
More info:
github.com/xeolabs/scenejs/wiki/geometry
*/
/*----------------------------------------------------------------------
* Scene graph definition
*---------------------------------------------------------------------*/
SceneJS.createScene({
type: "scene",
id: "the-scene",
canvasId: "theCanvas",
loggingElementId: "theLoggingDiv",
flags: {
backfaces: false
},
nodes: [
{
type: "lookAt",
eye : { x: 0.0, y: 10.0, z: 55 },
look : { y:1.0 },
up : { y: 1.0 },
nodes: [
{
type: "camera",
optics: {
type: "perspective",
fovy : 25.0,
aspect : 1.47,
near : 0.10,
far : 300.0
},
nodes: [
{
type: "light",
mode: "dir",
color: { r: 0.8, g: 0.8, b: 0.8 },
dir: { x: 1.0, y: -0.5, z: -1.0 }
},
{
type: "light",
mode: "dir",
color: { r: 0.8, g: 0.8, b: 0.8 },
dir: { x: 1.0, y: -1.0, z: -1.0 }
},
/* Next, modelling transforms to orient our geometry
* by a given angles. The rotate nodes have IDs that we'll locate them with below.
*/
{
type: "rotate",
id: "pitch",
angle: -30.0,
x : 1.0,
nodes: [
{
type: "rotate",
id: "yaw",
angle: 30.0,
y : 1.0,
nodes: [
{
type: "material",
baseColor: { r: 1.0, g: 1.0, b: 1.0 },
specularColor: { r: 0.4, g: 0.4, b: 0.4 },
specular: 0.2,
shine: 6.0,
nodes: [
{
type: "texture",
layers: [
{
uri:"graphic-webgl-scenejs-examples-web-images-BrickWall.jpg" ,
/* Texture scale factors
*/
scale : {
x: .1,
y: .05
}
}
],
nodes: [
/* Geometry node which defines our custom object, a simple cube.
*/
{
type: "geometry",
id: "myGeometry",
/* Optional resource name, must be unique among all
* geometries - if another geometry has already
* been defined with this resource type, then that
* geometry will be instanced here in place of
* this one, and this geometry definition will be
* ignored. This supports dynamic instancing,
* where we may reuse the same geometry in
* many places to save memory.
*/
resource: "my-geometry",
/* The primitive type - allowed values are
* "points", "lines", "line-loop", "line-strip",
* "triangles", "triangle-strip" and "triangle-fan".
*
* Try setting this config to these different
* types, it's quite freaky.
*
* See the OpenGL/WebGL specification docs for
* how the coordinate arrays are supposed to be laid out
* for them.
*/
primitive: "triangles",
/* The vertices - eight for our cube, each
* one spanning three array elements for X,Y and Z
*/
positions : [
/* v0-v1-v2-v3 front
*/
5, 5, 5,
-5, 5, 5,
-5,-5, 5,
5,-5, 5,
/* v0-v3-v4-v5 right
*/
5, 5, 5,
5,-5, 5,
5,-5,-5,
5, 5,-5,
/* v0-v5-v6-v1 top
*/
5, 5, 5,
5, 5,-5,
-5, 5,-5,
-5, 5, 5,
/* v1-v6-v7-v2 left
*/
-5, 5, 5,
-5, 5,-5,
-5,-5,-5,
-5,-5, 5,
/* v7-v4-v3-v2 bottom
*/
-5,-5,-5,
5,-5,-5,
5,-5, 5,
-5,-5, 5,
/* v4-v7-v6-v5 back
*/
5,-5,-5,
-5,-5,-5,
-5, 5,-5,
5, 5,-5
],
/* Normal vectors, one for each vertex
*/
normals : [
/* v0-v1-v2-v3 front
*/
0, 0, 1,
0, 0, 1,
0, 0, 1,
0, 0, 1,
/* v0-v3-v4-v5 right
*/
1, 0, 0,
1, 0, 0,
1, 0, 0,
1, 0, 0,
/* v0-v5-v6-v1 top
*/
0, 1, 0,
0, 1, 0,
0, 1, 0,
0, 1, 0,
/* v1-v6-v7-v2 left
*/
-1, 0, 0,
-1, 0, 0,
-1, 0, 0,
-1, 0, 0,
/* v7-v4-v3-v2 bottom
*/
0,-1, 0,
0,-1, 0,
0,-1, 0,
0,-1, 0,
/* v4-v7-v6-v5 back
*/
0, 0,-1,
0, 0,-1,
0, 0,-1,
0, 0,-1
],
/* 2D texture coordinates corresponding to the
* 3D positions defined above - eight for our cube, each
* one spaining two array elements for X and Y
*/
uv : [
/* v0-v1-v2-v3 front
*/
5, 5,
0, 5,
0, 0,
5, 0,
/* v0-v3-v4-v5 right
*/
0, 5,
0, 0,
5, 0,
5, 5,
/* v0-v5-v6-v1 top
*/
5, 0,
5, 5,
0, 5,
0, 0,
/* v1-v6-v7-v2 left
*/
5, 5,
0, 5,
0, 0,
5, 0,
/* v7-v4-v3-v2 bottom
*/
0, 0,
5, 0,
5, 5,
0, 5,
/* v4-v7-v6-v5 back
*/
0, 0,
5, 0,
5, 5,
0, 5
],
/* Indices - these organise the
* positions and uv texture coordinates
* into geometric primitives in accordance
* with the "primitive" parameter,
* in this case a set of three indices
* for each triangle.
*
* Note that each triangle is specified
* in counter-clockwise winding order.
*
* You can specify them in clockwise
* order if you configure the SceneJS.renderer
* node's frontFace property as "cw", instead of
* the default "ccw".
*/
indices : [
0, 1, 2,
0, 2, 3,
// front
4, 5, 6,
4, 6, 7,
// right
8, 9,10,
8,10,11,
// top
12,13,14,
12,14,15,
// left
16,17,18,
16,18,19,
// bottom
20,21,22,
20,22,23
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
});
var yaw = 30;
var pitch = -30;
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;
}
var scene = SceneJS.scene("the-scene");
var pitchRotate = scene.findNode("pitch");
var yawRotate = scene.findNode("yaw");
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);
}
/* On a mouse drag, we'll re-render the scene, passing in
* incremented angles in each time.
*/
function actionMove(posX, posY) {
if (dragging) {
yaw += (posX - lastX) * 0.5;
pitch += (posY - lastY) * 0.5;
lastX = posX;
lastY = posY;
pitchRotate.set("angle", pitch);
yawRotate.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);
scene.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.
