如何在 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 元素组合使用 vanilla 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屋！
