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

Question

我正在开发一个带有 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();

我想在 canvas 上显示 X、Y、Z 旋转和位置，看起来像这样：

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

Answer 1

您可以在 canvas.

之上组合香草 JavaScript 和 HTML 元素

HTML: 在 canvas elem

之后创建一个 div

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

JavaScript: select 即 div，并向其添加文本

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

然后您可以使用常规 CSS.

设置面板的样式和位置

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

How to display coordinate value on the top of a 3D cube three.js

html

javascript

3d

three.js