我试图了解如何在画布中定位我的立方体。 但我不明白定位是如何工作的。 我正在寻找一种方法来检测我的网格是否符合画布的限制。但是position.x或position.y的单位是多少?
画布宽度,高度和画布上的网格之间的关系是什么?
感谢。
var geometry = new Array(),material = new Array(),cube = new Array();
var i = 0;
for(i=0; i < 10;i++){
geometry[i] = new THREE.BoxGeometry(1,1,1);
material[i] = new THREE.MeshBasicMaterial({ color: 0x33FF99 });
cube[i] = new THREE.Mesh(geometry[i], material[i]);
scene.add(cube[i]);
}
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
var xRandom = 0;
var yRandom = 0;
var zRandom = 0;
var sens = 1;
for (i = 0; i < cube.length ; i++) {
document.getElementById('widthHeight').innerHTML = " " + window.innerHeight + " " + window.innerWidth + "<br> x:" + cube[i].position.x + " <br> y:" + cube[i].position.y + " <br> z:" + cube[i].position.z;
xRandom = (Math.random() * 0.010 + 0.001) * sens;
yRandom = (Math.random() * 0.010 + 0.001) * sens;
zRandom = (Math.random() * 0.010 + 0.001) * sens;
cube[i].position.setX(xRandom + cube[i].position.x);
cube[i].position.setY(yRandom + cube[i].position.y);
cube[i].position.setZ(zRandom + cube[i].position.z);
cube[i].rotation.x += 0.0191;
cube[i].rotation.y += 0.0198;
}
renderer.render(scene, camera);
};
render();
我添加了一个PlaneGeometry和一些测试来检测立方体是否达到新PlaneGeometry的极限x或y。
var geometry = new Array(),material = new Array(),cube = new Array();
var i = 0;
var planeMap = new THREE.PlaneGeometry(100, 100);
var materialMap = new THREE.MeshBasicMaterial({ color: 0xCE0F0F });
var map = new THREE.Mesh(planeMap,materialMap);
scene.add(map);
for(i=0; i < 5; i++){
geometry[i] = new THREE.BoxGeometry(3,3,3);
material[i] = new THREE.MeshBasicMaterial({ color: 0x336699 });
cube[i] = new THREE.Mesh(geometry[i], material[i]);
scene.add(cube[i]);
}
camera.position.z = 100;
var render = function () {
requestAnimationFrame(render);
var xRandom = 0,yRandom = 0,zRandom = 0,x=0,y=0,z=0;
var sensX = 1, sensY = 1, sensZ = 1;
var widthHeight = document.getElementById('widthHeight');
for (i = 0; i < cube.length ; i++) {
if (cube[i].geometry.type == "BoxGeometry") {
widthHeight.innerHTML = " " + window.innerHeight + " " + window.innerWidth + "<br> x:" + cube[i].position.x + " <br> y:" + cube[i].position.y + " <br> z:" + cube[i].position.z;
var currentCube = cube[i].position;
var widthCube = cube[i].geometry.parameters.width;
var heightCube = cube[i].geometry.parameters.height;
x = currentCube.x;
y = currentCube.y;
z = currentCube.z;
if (x >= ((map.geometry.parameters.width / 2) - widthCube)) {
sensX = -1;
}
if (x <= ((map.geometry.parameters.width / 2) - widthCube)*-1) {
sensX = 1;
}
if (y >= ((map.geometry.parameters.height / 2) - heightCube)) {
sensY = -1;
}
if (y <= ((map.geometry.parameters.height / 2) - heightCube)*-1) {
sensY = 1;
}
xRandom = (Math.random() * 0.650 + 0.001) * sensX * (i + 1);
yRandom = (Math.random() * 0.850 + 0.001) * sensY * (i + 1);
//zRandom = (Math.random() * 0.450 + 0.001) * sensZ * (i + 1);
cube[i].position.setX(xRandom + x);
cube[i].position.setY(yRandom + y);
cube[i].position.setZ(zRandom + z);
cube[i].rotation.x += 0.01;
cube[i].rotation.y += 0.01;
}
}
答案 0 :(得分:1)
在three.js中你正在使用3D空间,即场景。 x,y,z坐标位于该空间中。与现实世界类似,您可以将其视为一个包含一些物体的房间。
2D画布上显示的是您的相机如何看到该场景的特定视图。您可以通过修改代码中相机位置的z坐标来观察此情况。这类似于用带有一些物体的房间的真实相机拍照。
因此,3D对象位置与它们在画布中显示的位置的关系取决于摄像机视图。 Three.js可以告诉您在2D视图中投影某个3D位置的位置 - 有关详细信息和示例,请参阅答案:Converting 3D position to 2d screen position [r69!]