关于javascript：在three.js中定位网格

canvashtmljavascriptthree.js

Positioning mesh in three.js

我试图了解如何在画布上放置立方体。
但是我不明白定位是如何工作的。
我正在寻找一种方法来检测我的网格物体是否满足画布的限制。但是position.x或position.y的单位是什么？

画布的宽度，高度和画布上的网格之间的关系是什么？

谢谢。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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 +" x:" + cube[i].position.x +" y:" + cube[i].position.y +" 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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

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 +" x:" + cube[i].position.x +" y:" + cube[i].position.y +" 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;

}
}

在three.js中，您正在使用3D空间(场景)。 x，y，z坐标在该空间中。与现实世界类似，您可以将其视为其中包含一些对象的房间。

在2D画布上显示的是您的相机如何看到该场景的特定视图。您可以通过修改代码中相机位置的z坐标来观察此情况。这再次类似于使用带有某些对象的房间的真实相机拍摄照片。

因此3D对象位置与它们在画布中显示的位置之间的关系取决于摄影机视图。 Three.js可以告诉您2D视图中某些3D位置的投影-有关详细信息和示例，请参见此处的答案：将3D位置转换为2d屏幕位置[r69！]

相关讨论