Nested cuboids using pre3d
Bratish Goswami
to create a cuboid container which will contain smaller cuboids
inside.
Now, what I'm not getting properly, is how to place the internal
cuboid in a predefined co-ordinate. What will be the generalized
formula here for `transform2.translate`? This formula should work for
any cuboid I want to place inside.
The following is what I've done till now. If you put this two files
inside [demos][3] directory, they should work instantly.
// 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);
Sample HTML goes here:
// 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]: http://deanm.github.com/pre3d/colorscube.html
[2]: https://github.com/deanm/pre3d
[3]: https://github.com/deanm/pre3d/tree/master/demos
Dean
I'm not sure I exactly understand your question. I've tried your
example, and it seems like you are placing the 10x2x2 box inside of
the 10x10x10 cube fine. If you do no translation, it will be centered
over the origin. You are translated it with transform2 to center it
over (5,5,5).
I just noticed that it might be confusing that makeBox takes a w/h/d,
but actually it creates a box that is 2 times those dimensions, so
makeBox(2, 2, 2) will create a box that is 4x4x4, since the w/h/d are
specified are for the positive axises.
Cheers,
-- dean
> --
> You received this message because you are subscribed to the Google Groups "pre3d" group.
> To post to this group, send email to pr...@googlegroups.com.
> To unsubscribe from this group, send email to pre3d+un...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/pre3d?hl=en.
>
>
Bratish Goswami
My situation is, a program generates a sample output in JSON like
this:
{ "container":{ "W":100, "H":100, "D":100 }, "boxes":[
{ "w":40, "h":67, "d":97, "x":28, "y":0, "z":0
}, { "w":28, "h":84, "d":97, "x":0, "y":0, "z":
0 } ]}
Where, 'container' is an outer cuboid which has to be filled (totally
or partially) with smaller boxes. W, H and D are the width, height and
depth of the container respectively. So are w, h, d for each boxes. x,
y and z for each box denotes its bottom-left-backward corner place in
3d coordinate.
Now with your lightweight lib pre3d I'm trying to simulate this whole
setup visually, where someone can rotate the whole thing and see it
from different angle.
Can you please help me on how this can be achieved?
ThanksBratish
Dean
in the example you posted. You posted an example, but you didn't say
what was not working in that problem. What was the result of your
first example, and how is that different than what you want it to be?
Basically you can do what you are already doing, create a transform
for every box, translate the transform based on where you want it to
be centered. If you want it to be centered from a corner, then you of
course just offset it by w/2, h/2, d/2 or whatever to get one of the
corners.
Cheers,
-- dean
Bratish Goswami
Thanks Dean :)
-Bratish