Вложенные кубоиды с использованием pre3d - PullRequest
2 голосов
/ 01 ноября 2011

Используя этот пример из pre3d js lib, я пытаюсь создать контейнер кубоидов, который будет содержать внутри меньшие кубоиды.

Теперь, что я не получаю правильно, это как разместить внутренний кубоид в заранее определенной координате. Какая здесь будет обобщенная формула для transform2.translate? Эта формула должна работать для любого кубоида, который я хочу разместить внутри.

Вот что я сделал до сих пор. Если вы поместите эти два файла в каталог demos , они должны работать мгновенно.

// experiment.js
window.addEventListener('load', function() {

  var screen_canvas = document.getElementById('canvas');
  var renderer = new Pre3d.Renderer(screen_canvas);

  var transform1 = new Pre3d.Transform();
  transform1.translate(-0.5, -0.5, -0.5);

  var transform2 = new Pre3d.Transform();
// **** This is where i need your help ****//
  transform2.translate(10 - 10/2, 10 - 10/2 - 2, 10 - 10/2);
// **** **** **** ****//
  var cubes = [
  { //container
    shape: Pre3d.ShapeUtils.makeBox(10, 10, 10),
    color: new Pre3d.RGBA(9 / 10, 9 / 10, 9 / 10, 0.3),
    trans: transform1
  },
  { //axis
    shape: Pre3d.ShapeUtils.makeBox(10, 0.01, 0.01),
    color: new Pre3d.RGBA(0, 0, 0, 0.3),
    trans: transform1
  },
  {//axis
    shape: Pre3d.ShapeUtils.makeBox(0.01, 10, 0.01),
    color: new Pre3d.RGBA(0, 0, 0, 0.3),
    trans: transform1
  },
  {//axis
    shape: Pre3d.ShapeUtils.makeBox(0.01, 0.01, 10),
    color: new Pre3d.RGBA(0, 0, 0, 0.3),
    trans: transform1
  },
  {
    shape: Pre3d.ShapeUtils.makeBox(10.0, 2, 2),
    color: new Pre3d.RGBA(1.2, 0, 0, 0.3),
    trans: transform2
  }
];


  var num_cubes = cubes.length;
  var cur_white = false;  // Default to black background.

  function draw() {

    for (var i = 0; i < num_cubes; ++i) {
      cube = cubes[i];
      renderer.fill_rgba = cube.color;
      renderer.transform = cube.trans;
      renderer.bufferShape(cube.shape);
    }
    renderer.ctx.setFillColor(1, 1, 1, 1);
    renderer.drawBackground();

    renderer.drawBuffer();
    renderer.emptyBuffer();
  }

  renderer.camera.focal_length = 1.5;

  DemoUtils.autoCamera(renderer, 0, 0, -30, 0, 0, 0, draw);


  draw();
}, false);

Пример HTML здесь:

// experiment.html
<html>    
<head>    
<title>experiment Front end</title>    
<style>
  body * {
    font-family: sans-serif;
    font-size: 14px;
  }
  body.white {
    background-color: white;
    color: black;
  }
  body.black {
    background-color: black;
    color: white;
  }
  span.spaceyspan { margin-right: 20px; }
  div.centeredDiv { text-align: center; }
  li { list-style: none; }
  td { padding-right: 10px; }
</style>

<script src="../pre3d.js"></script>
<script src="../pre3d_shape_utils.js"></script>
<script src="demo_utils.js"></script>
<script src="experiment.js"></script>
</head>

<body>

<div class="centeredDiv">
<canvas id="canvas" width="800" height="600">
  Sorry, this demo requires a web browser which supports HTML5 canvas!
</canvas>
</div>


</body>
</html>

1 Ответ

0 голосов
/ 06 декабря 2013

Используйте концентрическое ограничение, чтобы сделать эту работу.Концентрическое ограничение делает две концентрические геометрии концентрическими по отношению друг к другу.Вот процесс:

  • Найдите центральную точку внешнего куба
  • Поместите центральную точку внутреннего куба в ту же точку
  • Повтор

Ссылки

...