gpt4 book ai didi

javascript - 在哪里(在 object3d 中)可以找到变化的点坐标?

转载 作者:行者123 更新时间:2023-12-02 21:23:41 25 4
gpt4 key购买 nike

这显示了一个绕 Y 轴旋转的点。
我想看到旋转时 X 坐标的变化。
这显示了起始坐标,但它不会改变。
不同的坐标一定在某个地方,对吗?在哪里?
我认为“pointa.geometry.vertices[0].x”就是这个地方。

编辑:我将旋转点设置为固定场景下的旋转组。

<!doctype html>
<html>
<head>
<title> a point </title>
<script src="http://threejs.org/build/three.js"></script>
<script type="text/javascript">
"use strict";
var js3canvas, renderer, camera, world, pointa, geometry, material, datadiv;
var norotate;
window.onload = function() {
"use strict";
js3canvas = document.getElementById("js3canvas");
datadiv = document.getElementById("data");
renderer = new THREE.WebGLRenderer( { canvas:js3canvas } );
camera = new THREE.PerspectiveCamera(50, 1, 1, 20);
camera.position.set(0,5,10);
camera.lookAt(0,0,0);
norotate = new THREE.Scene();
norotate.background = new THREE.Color(0x888888);
world = new THREE.Group();
norotate.add(world);
// make point
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(2.3456,0,0));
material = new THREE.PointsMaterial( { color:0xffffff } );
pointa = new THREE.Points(geometry, material);
world.add(pointa);
animate();
}
function animate() {
datadiv.innerHTML = "X coordinate: " + pointa.geometry.vertices[0].x; // the x coordinate
renderer.render( norotate, camera );
world.rotateY(.03);
requestAnimationFrame(animate);
}
</script>
</head>
<body>
<canvas width="200" height="200" id="js3canvas"></canvas>
<div id="data"></div>
</body>
</html>

最佳答案

当您更改对象的旋转、位置或比例时,只需将变换矩阵应用于几何体的点,保持点数据完整。

设置一个临时向量,将顶点复制到该向量中,从本地坐标系转换为世界坐标系:

var js3canvas, renderer, camera, world, pointa, geometry, material, datadiv;
var norotate;
js3canvas = document.getElementById("js3canvas");
datadiv = document.getElementById("data");
renderer = new THREE.WebGLRenderer({
canvas: js3canvas
});
camera = new THREE.PerspectiveCamera(50, 1, 1, 20);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);
norotate = new THREE.Scene();
norotate.background = new THREE.Color(0x888888);
world = new THREE.Group();
norotate.add(world);
// make point
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(2.3456, 0, 0));
material = new THREE.PointsMaterial({
color: 0xffffff
});
pointa = new THREE.Points(geometry, material);
world.add(pointa);
var tempV3 = new THREE.Vector3();
animate();

function animate() {
pointa.localToWorld(tempV3.copy(pointa.geometry.vertices[0]));
datadiv.innerHTML = "X coordinate: " + tempV3.x; // the x coordinate
renderer.render(norotate, camera);
world.rotateY(.03);
requestAnimationFrame(animate);
}
<canvas width="200" height="200" id="js3canvas"></canvas>
<div id="data"></div>
<script src="http://threejs.org/build/three.js"></script>

关于javascript - 在哪里(在 object3d 中)可以找到变化的点坐标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60792165/

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