[英]Three.js: How to flip the axis so Z-axis become X-axis
I am using three.js to visualise accelerometer data on a 3D cube.我正在使用 three.js 来可视化 3D 立方体上的加速度计数据。
My accelerometer collects data where X-axis refers to when the object is moving UP and Down, and Z-axis refers to when the object is moving Right and Left.我的加速度计收集数据,其中 X 轴指 object 上下移动时,Z 轴指 object 左右移动时。 In three.js when I am using enable the axis.helper(), it uses the standard axis such as Z to the top and X right and left and Y is up and down.在three.js中,当我使用启用axis.helper()时,它使用标准轴,例如Z向上,X左右,Y上下。
I want the axis to be fliped like the figure below:我希望轴像下图一样翻转:
This is the javascript code that I am using for visualization:这是我用于可视化的 javascript 代码:
import * as THREE from "three";
import data from "../data/data.json"
import "./style.css"
var width = window.innerWidth;
var height = window.innerHeight;
const canvas = document.querySelector('#canvas');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize (width, height);
var planeSize = 100000
const fov = 70;
const aspect = 2; // the canvas default
const near = 20;
const far = 500;
const camera = new THREE.PerspectiveCamera(70, width/height, 1, 10000);
camera.position.x = 100;
camera.position.y = 50;
camera.position.z = 50;
camera.lookAt (new THREE.Vector3(0,0,0));
const scene = new THREE.Scene();
{
const color = 0x00afaf;
const intensity = 10;
const size = 10;
const divisions = 10;
const gridHelper = new THREE.GridHelper( planeSize, 5000 );
gridHelper.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
scene.add(gridHelper);
const light = new THREE.PointLight(color, intensity);
scene.add(light);
}
const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshBasicMaterial({ color: "green", wireframe: false });
const object = new THREE.Mesh(boxGeometry, boxMaterial);
var cubeAxis = new THREE.AxesHelper(4);
object.add(cubeAxis);
object.scale.set(5, 5, 5)
scene.add(object);
scene.background = new THREE.Color(0.22, 0.23, 0.22);
let currentIndex = 0
let time = data[currentIndex].time
let velocity = new THREE.Vector3()
requestAnimationFrame(render);
function render(dt) {
dt *= 0.00001 // in seconds
time += dt
document.querySelector("#time").textContent = time.toFixed(2)
// Find datapoint matching current time
while (data[currentIndex].time < time) {
currentIndex++
if (currentIndex >= data.length) return
}
const {accX } = data[currentIndex]
document.querySelector("#accZ").textContent = accZ* 10;
const acceleration = new THREE.Vector3()
// object.rotation.set( rotX, rotY, rotZ)
object.position.z = accZ;
var relativeCameraOffset = new THREE.Vector3 (0,20,0);
var cameraOffset = relativeCameraOffset.applyMatrix4( object.matrixWorld );
camera.position.x = cameraOffset.x;
camera.position.y = cameraOffset.y;
camera.position.z = cameraOffset.z;
camera.lookAt( object.position );
resizeToClient();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function resizeToClient() {
const needResize = resizeRendererToDisplaySize()
if (needResize) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
}
function resizeRendererToDisplaySize() {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
You don't need to change the axes of three.js.您不需要更改 three.js 的轴。 Just change the inputs of your accelerometer data.只需更改加速度计数据的输入即可。
Instead of position.set(accX, accY, accZ);
而不是position.set(accX, accY, accZ);
Change it to position.set(accZ, accY, accX);
将其更改为position.set(accZ, accY, accX);
Or whatever order works for your case.或者任何适合您的情况的顺序。 The first image you posted isn't the way WebGL axes have been established, so you're going to have to play with the orders a little to get the desired result.您发布的第一张图片不是建立 WebGL 轴的方式,因此您将不得不稍微调整一下命令以获得所需的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.