文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

结合到一起

发布于 2025-02-18 12:46:45 字数 4817 浏览 0 评论 0 收藏 0

最后我们需要建立一个网格（我们的立方体)，创建一个摄像机，并面向我们的网格，然后实例化设备对象。

一旦这样做，我们将运行动画/渲染循环。在理想的情况下，这个循环将每隔 16 毫秒(60FPS) 执行一次。在每个循环周期，做了这样几件事：

1 - 清空屏幕并且将所有像素变黑(Clear() function)。
2 - 对网格更新位置和旋转值。
3 - 计算矩阵，渲染到后台缓冲区( Render() function)。
4 - 将后台缓冲区数据刷新到前台缓冲区以显示( Present() function)。

【译者注：C#代码】

private Device device;
Mesh mesh = new Mesh("Cube", 8);
Camera mera = new Camera();

private void Page_Loaded(object sender, RoutedEventArgs e)
{
  // 在这里设置后台缓冲区的分辨率
  WriteableBitmap bmp = new WriteableBitmap(640, 480);

  device = new Device(bmp);

  // 设置我们的 XAML 图像源
  frontBuffer.Source = bmp;

  mesh.Vertices[0] = new Vector3(-1, 1, 1);
  mesh.Vertices[1] = new Vector3(1, 1, 1);
  mesh.Vertices[2] = new Vector3(-1, -1, 1);
  mesh.Vertices[3] = new Vector3(-1, -1, -1);
  mesh.Vertices[4] = new Vector3(-1, 1, -1);
  mesh.Vertices[5] = new Vector3(1, 1, -1);
  mesh.Vertices[6] = new Vector3(1, -1, 1);
  mesh.Vertices[7] = new Vector3(1, -1, -1);

  mera.Position = new Vector3(0, 0, 10.0f);
  mera.Target = Vector3.Zero;

  // 注册 XAML 渲染循环
  CompositionTarget.Rendering += CompositionTarget_Rendering;
}

// 渲染循环处理
void CompositionTarget_Rendering(object sender, object e)
{
  device.Clear(0, 0, 0, 255);

  // 每一帧都稍微转动一下立方体
  mesh.Rotation = new Vector3(mesh.Rotation.X + 0.01f, mesh.Rotation.Y + 0.01f, mesh.Rotation.Z);

  // 做各种矩阵运算
  device.Render(mera, mesh);
  // 刷新后台缓冲区到前台缓冲区
  device.Present();
}

【译者注：TypeScript 代码】

///<reference path="SoftEngine.ts"/>

var canvas: HTMLCanvasElement; 
var device: SoftEngine.Device;
var mesh: SoftEngine.Mesh;
var meshes: SoftEngine.Mesh[] = [];
var mera: SoftEngine.Camera;

document.addEventListener("DOMContentLoaded", init, false);

function init()
{
  canvas = < HTMLCanvasElement > document.getElementById("frontBuffer");
  mesh = new SoftEngine.Mesh("Cube", 8);
  meshes.push(mesh);
  mera = new SoftEngine.Camera();
  device = new SoftEngine.Device(canvas);

  mesh.Vertices[0] = new BABYLON.Vector3(-1, 1, 1);
  mesh.Vertices[1] = new BABYLON.Vector3(1, 1, 1);
  mesh.Vertices[2] = new BABYLON.Vector3(-1, -1, 1);
  mesh.Vertices[3] = new BABYLON.Vector3(-1, -1, -1);
  mesh.Vertices[4] = new BABYLON.Vector3(-1, 1, -1);
  mesh.Vertices[5] = new BABYLON.Vector3(1, 1, -1);
  mesh.Vertices[6] = new BABYLON.Vector3(1, -1, 1);
  mesh.Vertices[7] = new BABYLON.Vector3(1, -1, -1);

  mera.Position = new BABYLON.Vector3(0, 0, 10);
  mera.Target = new BABYLON.Vector3(0, 0, 0);

  // 调用 Html5 渲染循环
  requestAnimationFrame(drawingLoop);
}

// 渲染循环处理
function drawingLoop()
{
  device.clear();

  // 每帧都稍微转动一下立方体
  mesh.Rotation.x += 0.01;
  mesh.Rotation.y += 0.01;

  // 做各种矩阵运算
  device.render(mera, meshes);
  // 刷新后台缓冲区到前台缓冲区
  device.present();

  // 递归调用 Html5 渲染循环
  requestAnimationFrame(drawingLoop);
}

【译者注：JavaScript 代码】

var canvas;
var device;
var mesh;
var meshes = [];
var mera;

document.addEventListener("DOMContentLoaded", init, false);

function init() {
  canvas = document.getElementById("frontBuffer");
  mesh = new SoftEngine.Mesh("Cube", 8);
  meshes.push(mesh);
  mera = new SoftEngine.Camera();
  device = new SoftEngine.Device(canvas);

  mesh.Vertices[0] = new BABYLON.Vector3(-1, 1, 1);
  mesh.Vertices[1] = new BABYLON.Vector3(1, 1, 1);
  mesh.Vertices[2] = new BABYLON.Vector3(-1, -1, 1);
  mesh.Vertices[3] = new BABYLON.Vector3(-1, -1, -1);
  mesh.Vertices[4] = new BABYLON.Vector3(-1, 1, -1);
  mesh.Vertices[5] = new BABYLON.Vector3(1, 1, -1);
  mesh.Vertices[6] = new BABYLON.Vector3(1, -1, 1);
  mesh.Vertices[7] = new BABYLON.Vector3(1, -1, -1);

  mera.Position = new BABYLON.Vector3(0, 0, 10);
  mera.Target = new BABYLON.Vector3(0, 0, 0);

  // 调用 Html5 渲染循环
  requestAnimationFrame(drawingLoop);
}

// 渲染循环处理
function drawingLoop() {
  device.clear();

  // 每帧都稍微转动一下立方体
  mesh.Rotation.x += 0.01;
  mesh.Rotation.y += 0.01;

  // 做各种矩阵运算
  device.render(mera, meshes);
  // 刷新后台缓冲区到前台缓冲区
  device.present();

  // 递归调用 Html5 渲染循环
  requestAnimationFrame(drawingLoop);
}

如果你已经正确的遵循这第一个教程的话，你应该已经得到这样的效果：

点我运行

如果没有，下载源代码：