如何在 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 旋轉和 position 看起來像這樣：

不幸的是，我在 stackoverflow 和其他網站上尋找解決方案，但我找不到可以輕松集成到代碼中的合適解決方案。 因此，如果有人可以幫助我，我將不勝感激。

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 設計和 position 面板。

如何在 3D 立方體 three.js 頂部顯示坐標值

問題描述

1 個解決方案

解決方案1
1 已采納 2020-12-18 06:03:22

如何在 3D 立方體 three.js 頂部顯示坐標值

問題描述

1 個解決方案

解決方案1 1 已采納 2020-12-18 06:03:22

解決方案1
1 已采納 2020-12-18 06:03:22