关于Threejs的使用二

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