wjlgryx
- 浏览: 314063 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
开发小菜：
支持IE9以下的吗？
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使：
开发Html5必须得下载么，我用dw编写，把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼：
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo：
你好，我想问下，导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX：
下载学习，初学者膜拜一下。
html5 实现动画（三）
Making an Application with O3D
Make the HTML for the webpage.
Step 1: Setup
...
<script type="text/javascript" src="../o3djs/base.js"></script>
<script type="text/javascript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
...
<body onload="init();">
<div id="o3d" style="width: 800px; height: 600px;"></div>
Step 1: Setup cont. Initialize O3D
//Creates the client area.
function init() {
o3djs.util.makeClients(initStep2);
}
function initStep2(clientElements) {
g_o3dElement = clientElements[0];
g_math = o3djs.math;
g_client = g_o3dElement.client;
g_pack = g_client.createPack();
g_root = g_pack.createObject('Transform');
g_viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_root,
g_client.renderGraphRoot);
Set the view and projection matrices
Step 1: Setup Cont. Make a Camera
var g_eye = [15, 25, 50];
var g_target = [0, 10, 0];
var g_up = [0, 1, 0];
function updateProjection() {
g_viewInfo.drawContext.projection =
g_math.matrix4.perspective(
g_math.degToRad(45), // field of view.
g_o3dWidth / g_o3dHeight, // aspect ratio
0.1, // Near plane.
5000); // Far plane.
}
function updateCamera() {
g_viewMatrix = g_math.matrix4.lookAt(g_eye, g_target, g_up);
g_viewInfo.drawContext.view = g_viewMatrix;
}
Make some materials.
Step 2: Put something on the screen.
var redMaterial = o3djs.material.createBasicMaterial(
g_pack,
g_viewInfo,
[0.2, 1, 0.2, 1]); // green
var checkerMaterial = o3djs.material.createMaterialFromFile(
g_pack,
'shaders/checker.shader',
g_viewInfo.performanceDrawList);
g_globalParams =
o3djs.material.createAndBindStandardParams(g_pack);
g_globalParams.lightWorldPos.value = [30, 60, 40];
g_globalParams.lightColor.value = [1, 1, 1, 1];
// Create a ground plane.
var shape = o3djs.primitives.createPlane(
g_pack, checkerMaterial, 100, 100, 10, 10);
var transform = g_pack.createObject('Transform');
transform.parent = g_root;
transform.addShape(shape);
// Create a cylinder.
var shape = o3djs.primitives.createCylinder(
g_pack, redMaterial, 2.5, 5, 20, 1,
g_math.matrix4.translation([0, 2.5, 0]));
g_playerTransform = g_pack.createObject('Transform');
g_playerTransform.parent = g_root;
g_playerTransform.addShape(shape);
Step 3: Let the user move something.
var g_keyDown = []; // which keys are down by key code.
function initStep2(...) {
...
o3djs.event.addEventListener(o3dElement, 'keydown', onKeyDown);
o3djs.event.addEventListener(o3dElement, 'keyup', onKeyUp);
}
function onKeyDown(e) {
g_keyDown[e.keyCode] = true;
}
function onKeyUp(e) {
g_keyDown[e.keyCode] = false;
}
Step 3: Per frame processing.
initStep2(...) {
...
g_client.setRenderCallback(onRender);
}
function onRender(renderEvent) {
var elapsedTime = renderEvent.elapsedTime;
handleMoveKeys(elapsedTime);
};
Step 3: Move something.
function handleMoveKeys(elapsedTime) {
var directionX = 0;
var directionZ = 0;
if (g_keyDown[37] || g_keyDown[65]) { directionX = -1; }
if (g_keyDown[39] || g_keyDown[68]) { directionX = 1; }
if (g_keyDown[38] || g_keyDown[87]) { directionZ = -1; }
if (g_keyDown[40] || g_keyDown[83]) { directionZ = 1; }
g_playerXPosition += directionX;
g_playerZPosition += directionZ;
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, 0, g_playerZPosition);
}
Step 4: Make it frame rate independent
var MOVE_VELOCITY = 25; // in units per second.
function handleMoveKeys(elapsedTime) {
...
g_playerXPosition += MOVE_VELOCITY * directionX *
elapsedTime;
g_playerZPosition += MOVE_VELOCITY * directionZ *
elapsedTime;
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, 0, g_playerZPosition);
}
Step 5: Make it move relative to the camera.
function computeMoveMatrixFromViewMatrix(viewMatrix) {
var cameraMatrix = g_math.matrix4.inverse(viewMatrix);
var xAxis = g_math.cross([0, 1, 0],
cameraMatrix[2].slice(0, 3));
var zAxis = g_math.cross(xAxis, [0, 1, 0]);
return [
xAxis.concat(0),
[0, 1, 0, 0],
zAxis.concat(0),
[0, 0, 0, 1]];
}
function updateCamera() {
...
g_moveMatrix = computeMoveMatrixFromViewMatrix(g_viewMatrix);
};
Step 5: Make it move relative to the camera.
function handleMoveKeys(elapsedTime) {
...
var moveTranslation = g_math.matrix4.transformPoint(
g_moveMatrix,
[MOVE_VELOCITY * directionX * elapsedTime,
0,
MOVE_VELOCITY * directionZ * elapsedTime]);
g_playerXPosition += moveTranslation[0];
g_playerZPosition += moveTranslation[2];
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, 0, g_playerZPosition);
}
Step 6: Make the camera follow the player.
function moveCamera() {
g_target = [g_playerXPosition, 10, g_playerZPosition];
updateCamera();
}
function onRender(renderEvent) {
moveCamera();
};
Step 7: Smooth the camera movement.
function moveCamera() {
var newTarget = [g_playerXPosition, 10, g_playerZPosition];
g_target = g_math.lerpVector(g_target, newTarget, 0.03);
updateCamera();
}
Step 8: Add some action.
function handleMoveKeys(elapsedTime) {
...
if (g_canJump) {
if (g_keyDown[32]) {
g_jumping = true;
g_canJump = false;
g_playerYVelocity = JUMP_VELOCITY;
}
} else {
if (g_jumping) {
g_playerYVelocity += GRAVITY * elapsedTime;
g_playerYPosition += g_playerYVelocity * elapsedTime;
if (g_playerYPosition <= 0) {
g_playerYPosition = 0;
g_jumping = false;
}
} else {
if (!g_keyDown[32]) {
g_canJump = true;
}
}
}
...
g_playerTransform.translate(
g_playerXPosition, g_playerYPosition, g_playerZPosition);
}
Step 9: Add effects.
function initStep2(clientElements) {
...
g_particleSystem = o3djs.particles.createParticleSystem(g_pack, g_viewInfo);
g_poofEmitter = g_particleSystem.createParticleEmitter();
g_poofEmitter.setState(o3djs.particles.ParticleStateIds.ADD);
g_poofEmitter.setColorRamp(
[1, 1, 1, 0.3,
1, 1, 1, 0]);
g_poofEmitter.setParameters({
numParticles: 30,
lifeTime: 0.5,
startTime: 0,
startSize: 5,
endSize: 10,
spinSpeedRange: 10},
function(index, parameters) {
var angle = Math.random() * 2 * Math.PI;
parameters.velocity = g_math.matrix4.transformPoint(
g_math.matrix4.rotationY(angle), [25, 2.5, 0]);
parameters.acceleration = g_math.mulVectorVector(
parameters.velocity, [-1.5, 1, -1.5]);
});
g_poof = g_poofEmitter.createOneShot(g_root);
Step 9: Add Effects
function handleMoveKeys(elapsedTime) {
...
if (g_jumping) {
g_playerYVelocity += GRAVITY * elapsedTime;
g_playerYPosition += g_playerYVelocity * elapsedTime;
if (g_playerYPosition <= 0) {
g_playerYPosition = 0;
g_poof.trigger(
[g_playerXPosition,
g_playerYPosition,
g_playerZPosition]);
g_jumping = false;
}
Step 10: Load a character.
function initStep2(...) {
...
var transform = g_pack.createObject('Transform');
g_playerTransform = transform;
var playerPack = g_client.createPack();
o3djs.scene.loadScene(g_client, playerPack,
g_playerTransform,
'assets/character.o3dtgz', initStep3);
}
function initStep3(playerPack, playerParent, exception) {
o3djs.pack.preparePack(playerPack, g_viewInfo);
o3djs.material.bindParams(playerPack, g_globalParams);
g_playerTransform.parent = g_root;
...
}
Step 11: Orient the character.
var g_playerDirection = 0;
...
function handleMoveKeys(elapsedTime) {
...
if (directionX != 0 || directionZ != 0) {
var moveTranslation = ...
var targetDirection = Math.atan2(moveTranslation[0],
moveTranslation[2]);
g_playerDirection = g_math.lerpRadian(
g_playerDirection, targetDirection, 0.2);
...
}
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, g_playerYPosition, g_playerZPosition);
g_playerTransform.rotateY(g_playerDirection);
}
Step 12: Animate the character.
var IDLE_START_TIME = 247 / 30;
var IDLE_END_TIME = 573 / 30;
var IDLE_TIME_RANGE = IDLE_END_TIME - IDLE_START_TIME;
var g_animTimer = IDLE_START_TIME;
function initStep2(...) {
...
var paramObject = playerPack.createObject('ParamObject');
g_animParam = paramObject.createParam('animTime',
'ParamFloat');
o3djs.scene.loadScene(g_client, playerPack,
g_playerTransform,
'assets/character.o3dtgz', initStep3,
{opt_animSource: g_animParam});
...
Step 12: Animate the character.
function onRender(renderEvent) {
...
handleAnimation(elapsedTime);
};
function handleAnimation(elapsedTime) {
g_animTimer += elapsedTime;
if (g_animTimer >= IDLE_END_TIME) {
g_animTimer = g_math.modClamp(g_animTimer,
IDLE_TIME_RANGE,
IDLE_START_TIME);
}
g_animParam.value = g_animTimer;
}
Step 13: Add more animation.
Repeat step 12 for various actions.
See step13.html
diff step12.html and step13.html to see what changed.
Step 14: Load a background.
function initStep2(...) {
...
var loader = o3djs.loader.createLoader(initStep3);
loader.loadScene(g_client, playerPack, g_playerTransform,
'assets/character.o3dtgz', prepareScene,
{opt_animSource: g_animParam});
var worldPack = g_client.createPack();
g_worldTransform = worldPack.createObject('Transform');
loader.loadScene(g_client, worldPack, g_worldTransform,
'assets/background.o3dtgz', prepareScene)
loader.finish();
}
function prepareScene(pack, sceneRoot, exception) {
o3djs.pack.preparePack(pack, g_viewInfo);
o3djs.material.bindParams(pack, g_globalParams);
sceneRoot.parent = g_root;
}
function initStep3(...) {
http://code.google.com/apis/o3d
Make the HTML for the webpage.
Step 1: Setup
...
<script type="text/javascript" src="../o3djs/base.js"></script>
<script type="text/javascript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
...
<body onload="init();">
<div id="o3d" style="width: 800px; height: 600px;"></div>
Step 1: Setup cont. Initialize O3D
//Creates the client area.
function init() {
o3djs.util.makeClients(initStep2);
}
function initStep2(clientElements) {
g_o3dElement = clientElements[0];
g_math = o3djs.math;
g_client = g_o3dElement.client;
g_pack = g_client.createPack();
g_root = g_pack.createObject('Transform');
g_viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_root,
g_client.renderGraphRoot);
Set the view and projection matrices
Step 1: Setup Cont. Make a Camera
var g_eye = [15, 25, 50];
var g_target = [0, 10, 0];
var g_up = [0, 1, 0];
function updateProjection() {
g_viewInfo.drawContext.projection =
g_math.matrix4.perspective(
g_math.degToRad(45), // field of view.
g_o3dWidth / g_o3dHeight, // aspect ratio
0.1, // Near plane.
5000); // Far plane.
}
function updateCamera() {
g_viewMatrix = g_math.matrix4.lookAt(g_eye, g_target, g_up);
g_viewInfo.drawContext.view = g_viewMatrix;
}
Make some materials.
Step 2: Put something on the screen.
var redMaterial = o3djs.material.createBasicMaterial(
g_pack,
g_viewInfo,
[0.2, 1, 0.2, 1]); // green
var checkerMaterial = o3djs.material.createMaterialFromFile(
g_pack,
'shaders/checker.shader',
g_viewInfo.performanceDrawList);
g_globalParams =
o3djs.material.createAndBindStandardParams(g_pack);
g_globalParams.lightWorldPos.value = [30, 60, 40];
g_globalParams.lightColor.value = [1, 1, 1, 1];
// Create a ground plane.
var shape = o3djs.primitives.createPlane(
g_pack, checkerMaterial, 100, 100, 10, 10);
var transform = g_pack.createObject('Transform');
transform.parent = g_root;
transform.addShape(shape);
// Create a cylinder.
var shape = o3djs.primitives.createCylinder(
g_pack, redMaterial, 2.5, 5, 20, 1,
g_math.matrix4.translation([0, 2.5, 0]));
g_playerTransform = g_pack.createObject('Transform');
g_playerTransform.parent = g_root;
g_playerTransform.addShape(shape);
Step 3: Let the user move something.
var g_keyDown = []; // which keys are down by key code.
function initStep2(...) {
...
o3djs.event.addEventListener(o3dElement, 'keydown', onKeyDown);
o3djs.event.addEventListener(o3dElement, 'keyup', onKeyUp);
}
function onKeyDown(e) {
g_keyDown[e.keyCode] = true;
}
function onKeyUp(e) {
g_keyDown[e.keyCode] = false;
}
Step 3: Per frame processing.
initStep2(...) {
...
g_client.setRenderCallback(onRender);
}
function onRender(renderEvent) {
var elapsedTime = renderEvent.elapsedTime;
handleMoveKeys(elapsedTime);
};
Step 3: Move something.
function handleMoveKeys(elapsedTime) {
var directionX = 0;
var directionZ = 0;
if (g_keyDown[37] || g_keyDown[65]) { directionX = -1; }
if (g_keyDown[39] || g_keyDown[68]) { directionX = 1; }
if (g_keyDown[38] || g_keyDown[87]) { directionZ = -1; }
if (g_keyDown[40] || g_keyDown[83]) { directionZ = 1; }
g_playerXPosition += directionX;
g_playerZPosition += directionZ;
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, 0, g_playerZPosition);
}
Step 4: Make it frame rate independent
var MOVE_VELOCITY = 25; // in units per second.
function handleMoveKeys(elapsedTime) {
...
g_playerXPosition += MOVE_VELOCITY * directionX *
elapsedTime;
g_playerZPosition += MOVE_VELOCITY * directionZ *
elapsedTime;
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, 0, g_playerZPosition);
}
Step 5: Make it move relative to the camera.
function computeMoveMatrixFromViewMatrix(viewMatrix) {
var cameraMatrix = g_math.matrix4.inverse(viewMatrix);
var xAxis = g_math.cross([0, 1, 0],
cameraMatrix[2].slice(0, 3));
var zAxis = g_math.cross(xAxis, [0, 1, 0]);
return [
xAxis.concat(0),
[0, 1, 0, 0],
zAxis.concat(0),
[0, 0, 0, 1]];
}
function updateCamera() {
...
g_moveMatrix = computeMoveMatrixFromViewMatrix(g_viewMatrix);
};
Step 5: Make it move relative to the camera.
function handleMoveKeys(elapsedTime) {
...
var moveTranslation = g_math.matrix4.transformPoint(
g_moveMatrix,
[MOVE_VELOCITY * directionX * elapsedTime,
0,
MOVE_VELOCITY * directionZ * elapsedTime]);
g_playerXPosition += moveTranslation[0];
g_playerZPosition += moveTranslation[2];
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, 0, g_playerZPosition);
}
Step 6: Make the camera follow the player.
function moveCamera() {
g_target = [g_playerXPosition, 10, g_playerZPosition];
updateCamera();
}
function onRender(renderEvent) {
moveCamera();
};
Step 7: Smooth the camera movement.
function moveCamera() {
var newTarget = [g_playerXPosition, 10, g_playerZPosition];
g_target = g_math.lerpVector(g_target, newTarget, 0.03);
updateCamera();
}
Step 8: Add some action.
function handleMoveKeys(elapsedTime) {
...
if (g_canJump) {
if (g_keyDown[32]) {
g_jumping = true;
g_canJump = false;
g_playerYVelocity = JUMP_VELOCITY;
}
} else {
if (g_jumping) {
g_playerYVelocity += GRAVITY * elapsedTime;
g_playerYPosition += g_playerYVelocity * elapsedTime;
if (g_playerYPosition <= 0) {
g_playerYPosition = 0;
g_jumping = false;
}
} else {
if (!g_keyDown[32]) {
g_canJump = true;
}
}
}
...
g_playerTransform.translate(
g_playerXPosition, g_playerYPosition, g_playerZPosition);
}
Step 9: Add effects.
function initStep2(clientElements) {
...
g_particleSystem = o3djs.particles.createParticleSystem(g_pack, g_viewInfo);
g_poofEmitter = g_particleSystem.createParticleEmitter();
g_poofEmitter.setState(o3djs.particles.ParticleStateIds.ADD);
g_poofEmitter.setColorRamp(
[1, 1, 1, 0.3,
1, 1, 1, 0]);
g_poofEmitter.setParameters({
numParticles: 30,
lifeTime: 0.5,
startTime: 0,
startSize: 5,
endSize: 10,
spinSpeedRange: 10},
function(index, parameters) {
var angle = Math.random() * 2 * Math.PI;
parameters.velocity = g_math.matrix4.transformPoint(
g_math.matrix4.rotationY(angle), [25, 2.5, 0]);
parameters.acceleration = g_math.mulVectorVector(
parameters.velocity, [-1.5, 1, -1.5]);
});
g_poof = g_poofEmitter.createOneShot(g_root);
Step 9: Add Effects
function handleMoveKeys(elapsedTime) {
...
if (g_jumping) {
g_playerYVelocity += GRAVITY * elapsedTime;
g_playerYPosition += g_playerYVelocity * elapsedTime;
if (g_playerYPosition <= 0) {
g_playerYPosition = 0;
g_poof.trigger(
[g_playerXPosition,
g_playerYPosition,
g_playerZPosition]);
g_jumping = false;
}
Step 10: Load a character.
function initStep2(...) {
...
var transform = g_pack.createObject('Transform');
g_playerTransform = transform;
var playerPack = g_client.createPack();
o3djs.scene.loadScene(g_client, playerPack,
g_playerTransform,
'assets/character.o3dtgz', initStep3);
}
function initStep3(playerPack, playerParent, exception) {
o3djs.pack.preparePack(playerPack, g_viewInfo);
o3djs.material.bindParams(playerPack, g_globalParams);
g_playerTransform.parent = g_root;
...
}
Step 11: Orient the character.
var g_playerDirection = 0;
...
function handleMoveKeys(elapsedTime) {
...
if (directionX != 0 || directionZ != 0) {
var moveTranslation = ...
var targetDirection = Math.atan2(moveTranslation[0],
moveTranslation[2]);
g_playerDirection = g_math.lerpRadian(
g_playerDirection, targetDirection, 0.2);
...
}
g_playerTransform.identity();
g_playerTransform.translate(
g_playerXPosition, g_playerYPosition, g_playerZPosition);
g_playerTransform.rotateY(g_playerDirection);
}
Step 12: Animate the character.
var IDLE_START_TIME = 247 / 30;
var IDLE_END_TIME = 573 / 30;
var IDLE_TIME_RANGE = IDLE_END_TIME - IDLE_START_TIME;
var g_animTimer = IDLE_START_TIME;
function initStep2(...) {
...
var paramObject = playerPack.createObject('ParamObject');
g_animParam = paramObject.createParam('animTime',
'ParamFloat');
o3djs.scene.loadScene(g_client, playerPack,
g_playerTransform,
'assets/character.o3dtgz', initStep3,
{opt_animSource: g_animParam});
...
Step 12: Animate the character.
function onRender(renderEvent) {
...
handleAnimation(elapsedTime);
};
function handleAnimation(elapsedTime) {
g_animTimer += elapsedTime;
if (g_animTimer >= IDLE_END_TIME) {
g_animTimer = g_math.modClamp(g_animTimer,
IDLE_TIME_RANGE,
IDLE_START_TIME);
}
g_animParam.value = g_animTimer;
}
Step 13: Add more animation.
Repeat step 12 for various actions.
See step13.html
diff step12.html and step13.html to see what changed.
Step 14: Load a background.
function initStep2(...) {
...
var loader = o3djs.loader.createLoader(initStep3);
loader.loadScene(g_client, playerPack, g_playerTransform,
'assets/character.o3dtgz', prepareScene,
{opt_animSource: g_animParam});
var worldPack = g_client.createPack();
g_worldTransform = worldPack.createObject('Transform');
loader.loadScene(g_client, worldPack, g_worldTransform,
'assets/background.o3dtgz', prepareScene)
loader.finish();
}
function prepareScene(pack, sceneRoot, exception) {
o3djs.pack.preparePack(pack, g_viewInfo);
o3djs.material.bindParams(pack, g_globalParams);
sceneRoot.parent = g_root;
}
function initStep3(...) {
http://code.google.com/apis/o3d
分享到：
发表评论
-
bufferData
2011-07-21 14:30 1122/*void*/ bufferData //缓冲区数 ... -
导入支持的格式(Import)
2011-05-31 16:54 2491导入对话框选择格式，你会看到众多导入的格式。3ds m ... -
法线贴图
2011-05-13 11:48 1936本文转自：http://yumi08.jimdo.co ... -
法线向量
2011-05-13 10:20 2546面法线的计算相对来 ... -
ShowWebGL 强大的3D模型查看器
2011-04-12 14:01 6192ShowWebGL http://showwebgl.com ... -
o3d 创建一个平面
2011-03-29 15:27 906var vertexInfo = o3djs.primitiv ... -
o3d 常见几何图形创建
2011-03-29 15:25 11431、基本形状包括： o3djs.primitives.cre ... -
o3D 材质-定义透明材质
2011-03-29 15:20 1121//定义一个为白色并且是透明材质 var material = ... -
o3D 光照设定材质的光反射系数
2011-03-29 15:19 10031、创建材质 2、设定效果 3、创建光源的位置 4、设置材质环 ... -
O3D程序基本结构
2011-03-29 15:13 853创建一个O3D对象 设置全局变量初始化通用库 创建一个O3D ... -
Google 三维 JavaScript API
2011-03-28 15:59 920O3D 是一个开源的Web API，其可以创建相当牛X的基于浏 ... -
3D引擎CopperLicht（二）
2011-03-28 15:14 1450在上一个课程的基础上 ... -
3D引擎CopperLicht
2011-03-28 15:09 1751WebGL是一种3D绘图标准， ... -
o3d 文档原文
2011-03-18 18:00 892Basic TasksThe basic tasks perf ... -
WebGL的框架
2011-03-18 16:23 3953WebGL的框架 WebGL http://www.khro ... -
c3dl 官方教程(二)
2011-03-18 16:13 1912教程＃2：一个简单的场景本教程将展示C3DL）的基础知识使用三 ... -
C3DL 官方教程(一)
2011-03-18 15:57 1579本文笔者翻译，如有错误请留言。 教程＃1：Web ... -
3D模型导入 CanvasMatrix.js引擎 demo(一)
2011-03-17 17:51 3082为广大html5 3d开发的朋友们演示 代码贴图，请下载附 ... -
c3dl 可以直接导入3dmax文件的3D引擎
2011-03-17 17:41 1217c3dl可以直接在网页代码中使用.dae格式的3dma ... -
o3d 模型导入引擎CanvasMatrix.js
2011-03-17 16:09 1652最近研究3d引擎在html5中的效果实现，需求当然是 ...
相关推荐
2. **易用性**：O3D通过封装WebGL的底层API，提供了一套高级接口，简化了3D编程的复杂性，使得开发者可以更快地学习和上手。 3. **丰富的功能集**：O3D包含了一系列实用工具和功能，如材质系统、动画系统、碰撞检测...
WebGL使得在移动设备上创建逼真的3D图形和游戏成为可能，如X3DOM和O3D等框架提供了更高级别的3D建模和交互。 2. 离线存储技术 HTML5的离线存储技术，如离线网页应用（Offline Web Applications），允许网页在用户...
物联网设备开发_蓝牙低能耗BLE技术_小米手环1非心率版数据读取与控制_实现Android平台下小米手环1代非心率版设备的蓝牙连接_步数数据获取_电量监测_震动控制功能_适用于An
内容概要：本文详细探讨了基于定子磁链定向矢量控制的双馈感应发电机（DFIG）空载并网模型。首先介绍了传统的PI控制方法，指出其在动态响应方面的局限性。接着，提出了通过引入模糊控制来改进PI控制的方法，展示了模糊控制在提高动态响应速度和减少误差方面的显著优势。文中提供了详细的代码实现和实验结果对比，证明了改进模型的有效性和优越性。 适合人群：从事电力电子、风电控制系统设计的研究人员和技术人员，尤其是对双馈感应发电机并网控制感兴趣的读者。 使用场景及目标：适用于希望深入了解DFIG并网控制策略的技术人员，旨在帮助他们掌握如何通过模糊控制优化PI控制器，以提高系统的动态响应速度和稳定性，减少并网瞬间的电流冲击。 其他说明：文章不仅提供了理论分析，还包括具体的代码实现和实验数据，便于读者理解和复现。同时，强调了模糊控制并非万能解决方案，需要结合实际情况进行调整和优化。
MuGuiLin_VoiceDictation_17128_1745869163155
termux，在安卓平台的模拟终端
内容概要：本文详细介绍了基于混合遗传算法-蚁群算法优化随机森林回归预测（GA-ACO-RFR）的MATLAB实现方法及其在电力领域的应用。首先，文章讲解了如何读取和预处理电厂运行数据，将其转化为可用于建模的数值矩阵。接着，深入探讨了GA-ACO-RFR的工作原理，包括遗传算法的全局搜索能力以及蚁群算法的局部寻优特性，并展示了具体的优化过程和关键代码。随后，文章演示了如何利用优化后的参数构建最终的随机森林回归模型，并进行了预测和评估，证明了该方法能够显著提高电厂运行数据的预测精度。此外，文中还提供了多个实用技巧，如数据归一化、种群初始化、适应度函数设计等。 适合人群：对电力数据分析感兴趣的工程师和技术人员，尤其是那些希望通过MATLAB实现复杂算法优化的人士。 使用场景及目标：适用于需要精确预测电厂运行参数（如主汽温度、发电负荷等）的场合，旨在帮助用户掌握GA-ACO-RFR的具体实现步骤，从而应用于实际项目中，达到优化电厂管理和提高能源效率的目的。 其他说明：文章不仅提供了详细的理论解释，还包括了大量的代码实例和配图，使得读者更容易理解和实践。同时，作者还分享了一些个人经验，如参数设置建议和性能优化技巧，进一步增强了文章的实用性。
内容概要：本文详细介绍了利用滑模观测器(SMO)实现永磁同步电机(PMSM)无位置传感器控制的方法及其仿真模型构建。首先解释了滑模观测器的工作原理，即通过构造滑动模态面使系统状态沿预设轨迹运动，从而估算电机的位置和转速。文中展示了具体的MATLAB/Simulink代码实现，包括滑模观测器的核心算法、锁相环(PLL)用于位置提取以及低通滤波器的应用。此外，讨论了调试过程中遇到的问题及解决方案，如滑模增益的选择、电流观测误差的处理、低速运行时的稳定性提升等。最后，通过仿真结果验证了该方案的有效性和鲁棒性。 适合人群：从事电机控制系统研究与开发的技术人员，尤其是对无位置传感器控制技术和滑模观测器感兴趣的工程师。 使用场景及目标：适用于希望减少硬件成本和复杂度，提高系统可靠性的情况。主要目标是在不使用物理位置传感器的情况下，实现对永磁同步电机的精确控制，确保系统的稳定性和响应速度。 其他说明：文中提供了丰富的代码片段和调试技巧，有助于读者快速理解和应用滑模观测器技术。同时强调了仿真与实际应用之间的差异，提醒开发者在实际部署时需要注意的问题。
知识领域_社区论坛系统_微信小程序_Java后端开发_网络安全_性能优化_技术关键词_uni-app_Vue2_SpringBoot_MybatisPlus_Redis_Mysql
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
DAB转换器 双有源桥（DAB）转换器是一种高频隔离DC-DC转换器，广泛应用于电动汽车充电器、可再生能源系统。 1输入侧 使用直流电压源 使用IGBT或MOSFET连接到全桥逆变器（通用桥） 使用移相PWM发生器进行控制 2.变压器 使用理想变压器或物理变压器模型 确保隔离并设置匝数比（例如1:1，或用于升压/降压） 3.输出侧 使用另一个全桥逆变器（充当整流器） 连接直流滤波电容器和负载（或电池） 4.控制策略 实施移相控制器： 相对于输入移位输出桥门信号
内容概要：本文详细介绍了车载充电机的完整设计方案，重点探讨了LLC谐振变换器和PFC（功率因数校正）的技术细节。文中不仅提供了LLC和PFC的C语言源码示例，还深入讲解了原理图、PCB布局及变压器设计等方面的内容。LLC部分强调了谐振频率的计算及其对变换器稳定性的影响，而PFC部分则关注于功率因数的提升方法。此外，文章还分享了许多实用的设计经验和调试技巧，如PCB布局的注意事项、变压器参数的选择等。 适合人群：从事车载充电技术研发的工程师和技术爱好者，尤其是希望深入了解LLC和PFC技术原理的人群。 使用场景及目标：帮助工程师优化车载充电机的设计，提高产品的性能和可靠性，同时为初学者提供全面的学习资料，加速技术掌握。 其他说明：文中提供的方案不仅适用于车载充电机，还可以应用于其他类似设备的研发，如吸尘器电源等。通过实际案例和详细的调试指南，使读者能够更好地理解和应用相关技术。
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文详细介绍了基于西门子PLC（如S7-1200和S7-200）和组态王6.55构建的锅炉控制系统。主要内容涵盖梯形图程序设计、硬件接线图、IO分配以及组态画面的设计。文章首先解释了锅炉控制的基本原理，包括手动模式和自动PID调节的梯形图逻辑，接着讨论了温度、压力等重要参数的采集与处理方法。此外，还探讨了组态王画面设计技巧，如动态属性绑定、动画效果实现等。最后分享了一些调试经验和优化建议，强调了安全冗余设计的重要性。 适合人群：从事工业自动化领域的工程师和技术人员，特别是熟悉PLC编程和HMI开发的专业人士。 使用场景及目标：适用于新建或改造锅炉控制系统项目，旨在帮助技术人员掌握完整的系统设计方案，确保系统稳定可靠运行，减少故障发生率，降低维护成本。 其他说明：文中提供了大量实际案例和经验总结，对于理解和应用工业自动化技术具有很高的参考价值。
scratch少儿编程逻辑思维游戏源码-海底冒险.zip
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文详细介绍了基于S7-1500 PLC和TP1500触摸屏的PID温度压力调节系统的应用案例。首先解释了PID控制的基础概念及其在S7-1500中的具体实现方法，包括使用FB41功能块进行温度调节的具体参数设置。接着探讨了S7-1500 PLC间的通讯机制，展示了如何利用STL语言编写通讯程序段，确保不同PLC之间的高效数据交换。此外，还讨论了TP1500触摸屏与PLC的交互方式，如变量关联和监控画面的设计，使得操作员能够便捷地监控和调整系统参数。文中提供了丰富的代码实例和技术细节，有助于深入理解S7-1500的强大功能及其在工业自动化领域的应用。 适合人群：从事工业自动化控制的技术人员，尤其是熟悉西门子PLC编程并希望深入了解S7-1500系列产品的工程师。 使用场景及目标：适用于需要构建稳定可靠的温度压力调节系统的工业环境，如钢铁厂、化工厂等。通过学习本文，读者可以掌握PID控制的基本原理、PLC编程技巧以及触摸屏与PLC的交互设计，从而提高项目的实施效率和质量。 其他说明：文中提到的一些关键技术和编程技巧对于解决实际工程中的难题非常有价值，例如PID参数整定、硬件联调等问题。同时，提供的代码示例可以直接应用于类似场景，减少了重复开发的工作量。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；