- 浏览: 308532 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
在上一个课程的基础上,我们掌握了在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>
复制代码
把原来的startCopperLichtFromFile部分代码替换为如下代码:
<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>
复制代码
好了,再一次执行代码,运行html文件,我们可以看到球开始旋转,按F 和G键,箱体运动,下面我们简单的解释一下代码的运行原理。
var engine = startCopperLichtFromFile('3darea', 'copperlichtdata/tutorial-2.ccbjs');
复制代码
我们用'engine'变量保存了一个CopperLicht class(类)的一个实例,同时告诉CopperLicht用的文件是'copperlichtdata/tutorial-2.ccbjs',CopperLicht会用html文档中名为'3darea'的画布<canvas>作为第一个参数,也就是后面的3d场景会转载到这个名为'3darea'的画布上。通过'engine' 这个实例,我们可以操作它其中的三维世界了。当CopperLicht导入场景完成后,我们需要CopperLicht给我们发一个信息,告诉我们它的三维场景导入完毕,于是,我们设定了一个导入完成事件:
// this is called when loading the 3d scene has finished
engine.OnLoadingComplete = function()
{
复制代码
获得engine里的三维场景节点,再通过这个节点,找到它的下级节点:'cubeMesh1' 和'sphereMesh1'。
var scene = engine.getScene();
if (scene)
{
// find the cube scene node
cubeSceneNode = scene.getSceneNodeFromName('cubeMesh1');
复制代码
'cubemesh'被装载到了cubeMesh节点,我们通过节点就直接可以控制物体的行为,移动、转动等。
因为有动画,所以我们需要场景能每帧刷新。
// also, force the 3d engine to update the scene every frame
scene.setRedrawMode(Scene.REDRAW_EVERY_FRAME);
复制代码
我们目前还不需要调用CL3D.Scene.forceRedrawNextFrame() ,因为我们的场景变化不大。我们可以在CopperCube编辑器里的发布项里进行这些设置。
为了让球体不断的旋转,我们用到了CopperLicht的Animators特性,Animators类是一个控制场景节点物体进行基本操作的类,如移动、旋转、路径运动、动画材质等,本案例我们用到了一个AnimatorRotation(旋转动画),速度为(0, 1.6, 0.8) ,直接把它加给球体就可以。
// additional, let the sphere constantly rotate
var sphereSceneNode = scene.getSceneNodeFromName('sphereMesh1');
if (sphereSceneNode)
sphereSceneNode.addAnimator(new AnimatorRotation(new Vect3d(0, 1.6, 0.8)));
复制代码
键盘输入
这时本课程的最后部分,我们通过按键'F' 和 'G'来控制箱体的运动,我们设置一个程序来捕获键盘输入事件:
document.onkeydown = function(event)
{
复制代码
需要注意的是,当CopperLicht引擎的实例生成出来后,它自动就生成了自己的一套键盘事件处理程序,为了有我们自己的一套键盘事件响应程序,我们需要把CopperLicht自动生成的那套响应程序删除,我们这样做:
// 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);
复制代码
在这之前,我们通过按键来控制箱体的运动:
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;
复制代码
好了,到这里我们知道如何控制场景里的物体运动了!
发表评论
-
bufferData
2011-07-21 14:30 1079/*void*/ bufferData //缓冲区数 ... -
导入支持的格式(Import)
2011-05-31 16:54 2457导入对话框选择格式,你会看到众多导入的格式。3ds m ... -
法线贴图
2011-05-13 11:48 1912本文转自:http://yumi08.jimdo.co ... -
法线向量
2011-05-13 10:20 2522面法线的计算相对来 ... -
ShowWebGL 强大的3D模型查看器
2011-04-12 14:01 6135ShowWebGL http://showwebgl.com ... -
o3d 创建一个平面
2011-03-29 15:27 870var vertexInfo = o3djs.primitiv ... -
o3d 常见几何图形创建
2011-03-29 15:25 11161、基本形状包括: o3djs.primitives.cre ... -
o3D 材质-定义透明材质
2011-03-29 15:20 1090//定义一个为白色并且是透明材质 var material = ... -
o3D 光照设定材质的光反射系数
2011-03-29 15:19 9631、创建材质 2、设定效果 3、创建光源的位置 4、设置材质环 ... -
O3D程序基本结构
2011-03-29 15:13 814创建一个O3D对象 设置全局变量初始化通用库 创建一个O3D ... -
Google 三维 JavaScript API
2011-03-28 15:59 892O3D 是一个开源的Web API,其可以创建相当牛X的基于浏 ... -
3D引擎CopperLicht
2011-03-28 15:09 1729WebGL是一种3D绘图标准, ... -
o3d 文档原文
2011-03-18 18:00 861Basic TasksThe basic tasks perf ... -
WebGL的框架
2011-03-18 16:23 3911WebGL的框架 WebGL http://www.khro ... -
c3dl 官方教程(二)
2011-03-18 16:13 1894教程#2:一个简单的场景本教程将展示C3DL)的基础知识使用三 ... -
C3DL 官方教程(一)
2011-03-18 15:57 1554本文笔者翻译,如有错误请留言。 教程#1:Web ... -
3D模型导入 CanvasMatrix.js引擎 demo(一)
2011-03-17 17:51 3040为广大html5 3d开发的朋友们演示 代码贴图,请下载附 ... -
c3dl 可以直接导入3dmax文件的3D引擎
2011-03-17 17:41 1186c3dl可以直接在网页代码中使用.dae格式的3dma ... -
o3d 模型导入引擎CanvasMatrix.js
2011-03-17 16:09 1630最近研究3d引擎在html5中的效果实现,需求当然是 ... -
o3d API总结
2011-03-17 13:52 888Making an Application with O3D ...
相关推荐
WebGL的普及也得益于中间件生态系统的成熟,开发者可以使用如C3DL、CopperLicht、Three.js等工具库,简化开发流程,提高开发效率。这些工具库提供了丰富的功能,帮助开发者快速构建复杂的3D场景和应用。 然而,...
项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7
YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;
1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用IAR软件开发,当前在CC2530上运行,如果是其他型号芯片,请自行移植。 3、软件下载时,请注意接上硬件,并确认烧录器连接正常。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。 9、例程具有一定专业性,非专业人士请谨慎操作。
手语图像分类数据集【已标注,约2,500张数据】 分类个数【36】:0、1、a、b等【具体查看json文件】 划分了训练集、测试集。存放各自的同一类数据图片。如果想可视化数据集,可以运行资源中的show脚本。 CNN分类网络改进:https://blog.csdn.net/qq_44886601/category_12858320.html 【更多图像分类、图像分割(医学)、目标检测(yolo)的项目以及相应网络的改进,可以参考本人主页:https://blog.csdn.net/qq_44886601/category_12803200.html】
CNCAP 2024打分表
系统可以提供信息显示和相应服务,其管理智慧校园管理系统信息,查看智慧校园管理系统信息,管理智慧校园管理系统。 项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 部署容器:tomcat7 小程序开发工具:hbuildx/微信开发者工具
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
影音互动科普网站功能描述 影音互动科普网站旨在通过多媒体形式(视频、音频、互动内容等)传播科学知识,提高公众的科学素养。该网站结合娱乐与教育,提供易于理解的科普内容,吸引不同年龄层次的用户参与和学习。以下是该网站的主要功能描述: 1. 用户注册与登录 用户注册:用户可以通过电子邮箱、手机号或社交账号(如微信、微博等)注册,提供基本信息并设置密码。 用户登录:支持通过注册的账号登录,保障个人信息的安全性,并提供自动登录功能。 2. 科普视频与音频库 视频内容:网站提供各类科普视频,包括短视频、纪录片、讲座、实验演示等,覆盖物理、化学、生物、地理、天文等多个领域。 音频内容:提供科普音频节目,如科普广播、播客、专题讲座等,便于用户在日常生活中进行学习。 视频分类:按科目、难度、年龄层、时长等维度对视频和音频进行分类,帮助用户更精准地找到感兴趣的内容。 字幕与多语言支持:提供字幕、翻译和多语种版本,帮助不同语言的用户学习。 3. 互动问答与讨论区 专家问答:用户可以向科普专家提问,专家提供详尽的解答,解决用户的科学疑惑。 社区讨论:用户可以在视频下方或专题页面中发表评论、提问或与其他用户
倪海厦讲义及笔记,易学数据测算
内容概要:本文档是《组合数学答案-网络流传版.pdf》的内容,主要包含了排列组合的基础知识以及一些经典的组合数学题目。这些题目涵盖了从排列数计算、二项式定理的应用到容斥原理的实际应用等方面。通过对这些题目的解析,帮助读者加深对组合数学概念和技巧的理解。 适用人群:适合初学者和有一定基础的学习者。 使用场景及目标:可以在学习组合数学课程时作为练习题参考,也可以在复习考试或准备竞赛时使用,目的是提高解决组合数学问题的能力。 其他说明:文档中的题目覆盖了组合数学的基本知识点,适合逐步深入学习。每个题目都有详细的解答步骤,有助于读者掌握解题思路和方法。
内容概要:本文是一篇完整的管理系统开发指南,详细介绍了功能要求、技术栈选择、数据库设计、用户界面搭建以及安全控制等方面的内容。功能要求包括用户管理、权限控制、数据管理、系统日志、通知与消息、统计分析和扩展模块。使用的技术栈涵盖了后端(Java、Python、C#等)和前端(React、Vue.js、Angular等)技术,以及数据库设计和安全控制措施。 适合人群:具备一定开发经验的软件工程师和技术管理人员。 使用场景及目标:适用于企业级管理系统开发项目,旨在构建一个高效、安全且易于扩展的系统。开发者可以参考本文档进行系统的设计和实现,确保系统满足业务需求。 其他说明:本文档提供了详细的步骤和最佳实践,帮助开发者更好地理解和应用管理系统开发的各种技术。通过结合实际案例和实践经验,本文档能够为开发者提供有价值的指导。
听器听力损伤程度分级表.docx
MATLAB代码:基于条件风险价值的合作型Stackerlberg博弈微网动态定价与优化调度 关键词:微网优化调度 条件风险价值 合作博弈 纳什谈判 参考文档:《A cooperative Stackelberg game based energy management considering price discrimination and risk assessment》完美复现 仿真平台:MATLAB yalmip+cplex+mosek 主要内容:代码主要做的是一个基于合作型Stackerlberg博弈的考虑差别定价和风险管理的微网动态定价与调度策略,提出了一个双层能源管理框架,实现多个微网间的P2P能源交易,上层为零商的动态定价模型,目标是社会福利最大化;下层是多个产消者的合作博弈模型,优化各产消者的能量管理策略。 同时,采用纳什谈判法对多个产消者的合作剩余进行公平分配,还考虑了运行风险,采用条件风险价值(CVaR)随机规划方法来描述零商的预期损失。 求解方面,双层模型被基于KKT条件转为单层模型,模型可以高效求解。 这段代码是一个基于合作型Stackelberg博弈的微网
YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;
20块钱买的【动漫网页设计】源码,免费分享出来啦,如果要积分那是系统自动涨的啦。 内容概要:本资源是一份动漫网页设计的源码,价格仅为20元,作者将其免费分享给大家。该源码包含了动漫元素的设计,包括背景、图标、按钮等,同时也提供了一些常见的网页布局和交互效果。通过该资源,可以学习到动漫网页设计的基本原理和技巧。 适用人群:本资源适用于对动漫网页设计感兴趣的人群,包括网页设计师、UI设计师、前端开发工程师等。同时,对于想要学习动漫网页设计的初学者也非常适用。 使用场景及目标:该资源可以用于学习和实践动漫网页设计的技巧和原理。通过学习该源码,可以了解到动漫网页设计的基本要素和设计思路,同时也可以借鉴其中的设计元素和交互效果,应用到自己的网页设计中。 其他说明:本资源是作者自己设计的,经过了多次修改和优化,具有一定的参考价值。同时,作者也将其价格设置的非常低,希望更多的人可以学习到动漫网页设计的技巧和方法。如果您对该资源有任何疑问或建议,欢迎在评论区留言,作者会尽快回复。。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。
自考 本科 C++程序设计-课本 参考答案
每周质量安全排查报告.docx
YOLO算法-杂草检测项目数据集-3970张图像带标签-杂草.zip
内存搜索工具(易).rar