关于Threejs的使用二

最新推荐文章于 2024-07-26 20:46:33 发布

Hope瑶瑶瑶~☆

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量265

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/confidence_fy/article/details/139671258

版权

Threejs之前是没有使用过的，由于项目需要最近一段时间一直在研究；

关于绘制字体：

有两种方案：

1.可以通过页面添加标签化元素进行插入到页面中：

          //創建元素
          const descriptionElement = document.createElement('div');
          descriptionElement.style.position = 'absolute';
          descriptionElement.style.top = '10px';
          descriptionElement.style.left = '10px';
          descriptionElement.style.color = 'black';
          descriptionElement.innerHTML = description;
          document.body.appendChild(descriptionElement);

          //根據位置進行調整
           object.updateDescriptionPosition = function() {
            const vector = new THREE.Vector3();
            vector.setFromMatrixPosition(sphere.matrixWorld);
            const projectedPosition = vector.project(_this.cameraPersp);
            descriptionElement.style.left = (window.innerWidth * (projectedPosition.x + 1) / 2) + 'px';
            descriptionElement.style.top = (window.innerHeight * (1 - projectedPosition.y) / 2) + 'px';

          };

2.可以通过使用threejs的3d文字绘制；

在此使用之前遇到了一个问题： threejs的3d通过加载文字英文、数字是没问题的，汉字显示的是问号，这就说明没有转换成功，后来找到原因是：由于threejs本身是不支持的，所以我们可以把需要的字体文件转换成json或者ttf版本进行加载；

import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
import jsonText from "three/examples/fonts/FangSong_Regular.json";

      const fontLoader = new FontLoader();
      const font = fontLoader.parse(jsonText);

      const textGeometry = new THREE.TextGeometry("哈喽啊，朋友们~", {
        font: font,
        size: 5,
        height: 1.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.1,
        bevelSize: 0.1,
        bevelOffset: 0,
        bevelSegments: 5,
      });

      var textMaterial = new THREE.MeshBasicMaterial({ color: color });
      var textMesh = new THREE.Mesh(textGeometry, textMaterial);
        textMesh.position.x = 10;   //根据自己的需要可以实时更新文字位置的变化
        textMesh.position.y = 10;
        textMesh.position.z = 10;
     

      this.scene.add(textMesh);

      function moveClick() { //改变字体的朝向
        textMesh.lookAt(_this.control.camera.position);
      }
      this.renderer.domElement.addEventListener("mousedown", moveClick, false);