Rotating camera around scene - CopperLicht Forum

Ambiera Forum

Discussions, Help and Support.

	Ambiera Forum > CopperLicht
	Rotating camera around scene

mtlca401 Registered User
Quote
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.

[code]
<!DOCTYPE HTML>
<html>
<head>
<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>

<style>
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;}

</style>

<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();
engine.addScene(scene);

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

// add our own scene node
var mynode = new MySceneNode(engine, 15, 0.1, 15);
scene.getRootSceneNode().addChild(mynode);
// 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;

scene.getRootSceneNode().addChild(cam);
scene.setActiveCamera(cam);

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

function writeToDebug(str) {
$("debugblock").html(str);
}

function resize_canvas(offsetW, offsetH){

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

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

$("3darea").css({"position

mtlca401 Registered User
Quote
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();
            this.MyMesh.AddMeshBuffer(buf);
            
            // 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);
            CL3D.SceneNode.prototype.OnRegisterSceneNode.call(this, scene); // call base class
        }
        
        MySceneNode.prototype.render = function(renderer)
        {
            renderer.setWorld(this.getAbsoluteTransformation());
            renderer.drawMesh(this.MyMesh);
        }
    
	</script>
</head>

<body>
	<div id="debugblock"></div>
    <center>
	    <canvas id="3darea"></canvas>
	</center>
</body>
</html>

niko Moderator
Quote
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:

Possible Codes

Feature	Code
Link	[url] www.example.com [/url]
Bold	[b]bold text[/b]
Image	[img]http://www.example.com/image.jpg[/img]
Quote	[quote]quoted text[/quote]
Code	[code]source code[/code]

Emoticons