Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > CopperLicht
Rotating camera around scene

Registered User
2013-03-20 01:44:38

I am trying to take existing code from other web 3d technologies that I have worked with, and transform it to copperlicht.

What I am trying to accomplish is create a board for some sort of game (no game in particular, but a bird's eye view game). I have figured out how to create the board by extending the MeshSceneNode, but am having trouble figuring out how to center the board, and rotate the camera around the board (or scene really).

For centering the board, I'm assuming that I have to center the vertices, but I'm not really sure how to follow what they are doing.

For the rotating around the scene, I have tried AnimatorCameraFPS and AnimatorCameraModelViewer. AnimatorCameraFPS looks to move the camera around. AnimatorCameraModelViewer looks to rotate the camera around the scene, but it does not spin the scene using the center of the board.

<link rel="stylesheet" href="style/x3dom.css" />

<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/raphael-min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/copperlicht.js"></script>

body {overflow: hidden; background: black; margin: 0; padding: 0;}
debugblock {position: absolute; padding: 5px; width: 200px; min-height: 25px; background: black; color: 2AFF00; top: 5px; right: 15px; z-index: 1001;}


<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
var screenW = $(document).width();
var screenH = $(document).height();
var offsetW = 300;
var offsetH = 200;

resize_canvas(offsetW, offsetH);

$(window).resize(function() {
resize_canvas(offsetW, offsetH);

// create the 3d engine
var engine = new CL3D.CopperLicht('3darea');

if (!engine.initRenderer())
return; // this browser doesn't support WebGL

// add a new 3d scene
var scene = new CL3D.Scene();

scene.setBackgroundColor(CL3D.createColor(1, 0, 0, 64));

// add our own scene node
var mynode = new MySceneNode(engine, 15, 0.1, 15);
// mynode.addAnimator(new CL3D.AnimatorRotation(new CL3D.Vect3d(0, 0.6, 0)));

// add a user controlled camera with a first person shooter style camera controller
var cam = new CL3D.CameraSceneNode();
cam.Pos.X = 0;
cam.Pos.Y = 20;
cam.Pos.Z = 0;


var animator = new CL3D.AnimatorCameraFPS(cam, engine);

function writeToDebug(str) {

function resize_canvas(offsetW, offsetH){

canvas = document.getElementById("3darea");

canvas.width = window.innerWidth - offsetW;
canvas.height = window.innerHeight - offsetH;


Registered User
2013-03-20 01:45:22

My code got cut off.

$("3darea").css({"position": "relative", "top": (offsetH/2) + "px"});

// helper function for quickly creating a 3d vertex from 3d position and texture coodinates
createVertex = function (x, y, z, s, t)
var vtx = new CL3D.Vertex3D(true);
vtx.Pos.X = x;
vtx.Pos.Y = y;
vtx.Pos.Z = z;
vtx.TCoords.X = s;
vtx.TCoords.Y = t;
return vtx;

// our own scene node implementation
MySceneNode = function(engine, x, y, z)
this.init(); // init scene node specific members

// create a 3d mesh with one mesh buffer
this.MyMesh = new CL3D.Mesh();
var buf = new CL3D.MeshBuffer();

// set indices and vertices
buf.Indices = [0,2,1, 0,3,2, 1,5,4, 1,2,5, 4,6,7, 4,5,6, 7,3,0, 7,6,3, 9,5,2, 9,8,5, 0,11,10, 0,10,7];

buf.Vertices.push(createVertex(0, 0, 0, 0, 1));
buf.Vertices.push(createVertex(x, 0, 0, 1, 1));
buf.Vertices.push(createVertex(x, y, 0, 1, 0));
buf.Vertices.push(createVertex(0, y, 0, 0, 0));
buf.Vertices.push(createVertex(x, 0, z, 0, 1));
buf.Vertices.push(createVertex(x, y, z, 0, 0));
buf.Vertices.push(createVertex(0, y, z, 1, 0));
buf.Vertices.push(createVertex(0, 0, z, 1, 1));
buf.Vertices.push(createVertex(0, y, z, 0, 1));
buf.Vertices.push(createVertex(0, y, 0, 1, 1));
buf.Vertices.push(createVertex(x, 0, z, 1, 0));
buf.Vertices.push(createVertex(x, 0, 0, 0, 0));

// set the texture of the material

// buf.Mat.Tex1 = engine.getTextureManager().getTexture("test.jpg", true);
MySceneNode.prototype = new CL3D.SceneNode(); // derive from SceneNode

MySceneNode.prototype.OnRegisterSceneNode = function(scene)
scene.registerNodeForRendering(this, CL3D.Scene.RENDER_MODE_DEFAULT);, scene); // call base class

MySceneNode.prototype.render = function(renderer)


<div id="debugblock"></div>
<canvas id="3darea"></canvas>

2013-03-20 06:40:41

For moving the camera, simply change the position of the camera, and set its target position where it should look to.
For centering your 3D Mesh: It would probably also be possible to just set the position of your 3D Mesh so that it is centered. You only need to know how big it is for this.
From what you posted, the code you used looks pretty much like the 3rd tutorial without many changes, so I'm not sure where you are stuck exactly :)

Create reply:

Posted by: (you are not logged in)

Enter the missing letter in: "?nternational" (you are not logged in)




Possible Codes

Feature Code
Link [url] [/url]
Bold [b]bold text[/b]
Image [img][/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]



Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact