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

问题

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>

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();

I want to display the X, Y, Z rotation and position on the canvas to look something like that:

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.

回答1:

You could do a combination vanilla JavaScript with HTML elements on top of your canvas.

HTML: create a div after the canvas elem

<canvas id="canvas"></canvas>
<div id="accelPanel"></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;

Then you can style and position the panel with regular CSS.

来源：https://stackoverflow.com/questions/65319696/how-to-display-coordinate-value-on-the-top-of-a-3d-cube-three-js

标签

javascript

html

three.js