当前位置: 首页> 汽车> 报价 > 关于Threejs的使用二

关于Threejs的使用二

时间:2025/7/11 7:40:11来源:https://blog.csdn.net/confidence_fy/article/details/139671258 浏览次数: 0次

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

关键字:关于Threejs的使用二

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: