如何在 3D 立方体的顶部显示坐标值 three.js答案

【问题标题】：How to display coordinate value on the top of a 3D cube three.js如何在 3D 立方体的顶部显示坐标值 three.js
【发布时间】：2021-03-26 21:40:57
【问题描述】：

我正在使用three.js 开发一个3D 立方体，它可以连续旋转和平移。 3D 立方体现在使用随机生成的数字旋转（最终数字将来自加速度计和陀螺仪）。下面是 HTML 代码：

<!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代码：

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 旋转和位置，看起来像这样：

不幸的是，我在 stackoverflow 和其他网站上寻找解决方案，但找不到可以轻松集成到代码中的合适解决方案。因此，如果有人可以帮助我，我将不胜感激。

【问题讨论】：

标签： javascript html three.js 3d

【解决方案1】：

您可以在画布上将原生 JavaScript 与 HTML 元素结合使用。

HTML：在画布元素之后创建一个 div

<canvas id="canvas"></canvas>
<div id="accelPanel"></div>

JavaScript：选择该 div，然后向其中添加文本

const accelPanel = document.querySelector('#accelPanel');
accelPanel.innerHtml = "Accelerometer:<br>X: " + xVal + "<br>Y: " + yVal + "<br>Z: " + zVal;

然后您可以使用常规 CSS 设置面板的样式和位置。

【讨论】：

感谢您的回答。我在哪里放置javascript代码？我试图把它放在 renderer.render(scene, camera);但没有用。