如何在3D多维数据集three.js的顶部显示坐标值 [英] How to display coordinate value on the top of a 3D cube three.js
问题描述
我正在开发一个具有three.js的3D立方体，该立方体可以连续旋转和平移.现在，使用随机生成的数字旋转3D多维数据集(最终这些数字将来自加速度计和陀螺仪).以下是HTML代码:
I am developing a 3D cube with three.js that rotates and translates continously. The 3D cube is rotated using random generated numbers for now (Ultimately the numbers will be coming from an accelerometer and gyroscope). Below is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="css" href="style.css">
<script src="https://threejs.org/build/three.min.js"></script>
<script src= "https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="module"> import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js"</script>
</head>
<h1 style="color:red">3D Model Rotation and Translation</h1>
<body>
<canvas id="canvas" width="1500" height="800" style="border:1px solid #000000;"></canvas>
</body>
<script src="index.js"></script>
</html>
下面是JavaScript代码:
Below is the javascript code:
function main() {
const canvas = document.querySelector('#canvas');
const renderer = new THREE.WebGLRenderer({canvas});
var context = canvas.getContext("2d");
const fov = 60;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 2000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 50, 1.5);
camera.up.set(0, 0, 1);
camera.lookAt(0, 0, 0);
const scene = new THREE.Scene();
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.PointLight(color, intensity);
scene.add(light);
}
// an array of objects who's rotation to update
const objects = [];
const radius = 3;
const widthSegments = 3;
const heightSegments = 3;
const sphereGeometry = new THREE.BoxGeometry(
radius, widthSegments, heightSegments);
const sunMaterial = new THREE.MeshBasicMaterial({color: "green",wireframe: false});
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
// var worldAxis = new THREE.AxesHelper(50);
// scene.add(sunMesh);
var cubeAxis = new THREE.AxesHelper(10);
sunMesh.add(cubeAxis);
sunMesh.scale.set(2, 2, 2);
scene.add(sunMesh);
objects.push(sunMesh);
function resizeRendererToDisplaySize(renderer) {
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;
}
function render(speed) {
speed *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
objects.forEach((obj) => {
obj.rotation.x = speed+1;
obj.rotation.y = speed+2;
obj.rotation.z = speed+34;
obj.position.x = speed+1;
obj.position.y = speed+2;
obj.position.z = speed+2;
console.log(obj.rotation.x)
});
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
我想在画布上显示X，Y，Z旋转和位置，如下所示:
I want to display the X, Y, Z rotation and position on the canvas to look something like that:
很不幸，我到处都是stackoverflow和其他网站，以寻求解决方案，但是找不到适合的解决方案，可以轻松地将其集成到代码中.因此，如果有人可以帮助我，我将不胜感激.
Unfortunely, I looked around stackoverflow and other website for solution but I couldn't find a suitable solution that can easily integrated in the code. Therefore, I would appreciate if anyone can help me with that.
推荐答案
您可以在画布顶部使用HTML元素与原始JavaScript结合使用.
You could do a combination vanilla JavaScript with HTML elements on top of your canvas.
HTML:在画布元素之后创建一个div
HTML: create a div after the canvas elem
<canvas id="canvas"></canvas>
<div id="accelPanel"></div>
JavaScript:选择该div，然后向其中添加文本
JavaScript: select that div, and add text to it
const accelPanel = document.querySelector('#accelPanel');
accelPanel.innerHtml = "Accelerometer:<br>X: " + xVal + "<br>Y: " + yVal + "<br>Z: " + zVal;
然后，您可以使用常规CSS设置面板的样式和位置.
Then you can style and position the panel with regular CSS.
这篇关于如何在3D多维数据集three.js的顶部显示坐标值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
