gpt4 book ai didi

javascript - 使用 pre3d 的嵌套长方体

转载 作者:行者123 更新时间:2023-11-30 06:44:42 26 4
gpt4 key购买 nike

借助这个 example来自 pre3d我正在尝试创建一个包含较小长方体的长方体容器。

现在,我没有得到正确的是如何将内部长方体放置在预定义的坐标中。 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>

最佳答案

使用同心约束来完成这项工作。同心约束使两个同心几何体彼此同心。过程如下:

  • 找到外立方体的中心点
  • 将内部立方体的中心点放在同一点
  • 重复

引用资料

关于javascript - 使用 pre3d 的嵌套长方体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7970761/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com