CopperLicht 入门(二)运动与键盘输入
【专业web 3d、webGL、flash 3d程序开发:北京贝武易科技公司】
有疑问请联系我QQ:1539988257
贝武易-HTML5 3D技术联盟机构,提供研究、交流和培训机会,欢迎加入,地点:北京。
贝武易-HTML5 3D技术联盟群:49771294
本课程是学习通过键盘移动物体,效果如下图:
在上一个课程的基础上,我们掌握了在CopperCube里,如何建立基本的场景和物体。
在CopperCube中,建立一个平面、箱体、球体,保证箱体名为'cubeMesh1',球体名为'sphereMesh1',建立好的场景如下:
编写CopperLicht代码
像上一节教材那样,输出一个.ccbjs文件到CopperLicht,保存Coppercube文件,发布场景为WebGL:Tools -> Test as JavaScript/WebGL,用网页编辑器打开新生成的.html文件,代码如下:
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="copperlichtdata/copperlicht.js"></script></head><body> <div align="center"> <canvas id="3darea" width="640" height="480" style="background-color:#000000"> </canvas> </div> <script type="text/javascript"> <!-- startCopperLichtFromFile('3darea', 'copperlichtdata/tutorial-2.ccbjs'); --> </script></body></html>
<script type="text/javascript"> <!-- var engine = startCopperLichtFromFile('3darea', 'copperlichtdata/tutorial-2.ccbjs'); var cubeSceneNode = null; // this is called when loading the 3d scene has finished engine.OnLoadingComplete = function() { var scene = engine.getScene(); if (scene) { // find the cube scene node cubeSceneNode = scene.getSceneNodeFromName('cubeMesh1'); // also, force the 3d engine to update the scene every frame scene.setRedrawMode(CL3D.Scene.REDRAW_EVERY_FRAME); // additional, let the sphere constantly rotate var sphereSceneNode = scene.getSceneNodeFromName('sphereMesh1'); if (sphereSceneNode) sphereSceneNode.addAnimator(new CL3D.AnimatorRotation(new CL3D.Vect3d(0, 1.6, 0.8))); } } document.onkeydown = function(event) { var key = String.fromCharCode(event.keyCode); // when pressed 'L', move the cube scene node a bit up if (key == 'F' && cubeSceneNode) cubeSceneNode.Pos.Y += 5; // when pressed 'G', move the cube scene node a bit down if (key == 'G' && cubeSceneNode) cubeSceneNode.Pos.Y -= 5; // we need to call the key handler of the 3d engine as well, so that the user is // able to move the camera using the keys engine.handleKeyDown(event); }; --> </script>
var engine = startCopperLichtFromFile('3darea', 'copperlichtdata/tutorial-2.ccbjs');
// this is called when loading the 3d scene has finished engine.OnLoadingComplete = function() {
var scene = engine.getScene();if (scene){ // find the cube scene node cubeSceneNode = scene.getSceneNodeFromName('cubeMesh1');
// also, force the 3d engine to update the scene every framescene.setRedrawMode(Scene.REDRAW_EVERY_FRAME);
// additional, let the sphere constantly rotatevar sphereSceneNode = scene.getSceneNodeFromName('sphereMesh1');if (sphereSceneNode) sphereSceneNode.addAnimator(new AnimatorRotation(new Vect3d(0, 1.6, 0.8)));
document.onkeydown = function(event){
// we need to call the key handler of the 3d engine as well, so that the user is// able to move the camera using the keysengine.handleKeyDown(event);
var key = String.fromCharCode(event.keyCode); // when pressed 'L', move the cube scene node a bit upif (key == 'F' && cubeSceneNode) cubeSceneNode.Pos.Y += 5; // when pressed 'G', move the cube scene node a bit downif (key == 'G' && cubeSceneNode) cubeSceneNode.Pos.Y -= 5;