threejs — 13 3D Text 几何银河

最新推荐文章于 2024-06-26 10:27:35 发布

TaiXinF

最新推荐文章于 2024-06-26 10:27:35 发布

阅读量308

点赞数

分类专栏： webgl threejs 文章标签： 3d javascript 开发语言

本文链接：https://blog.csdn.net/Tx457973/article/details/127264939

版权

本文详细介绍了如何使用Three.js库在WebGL中创建动态的3D文字效果，通过JavaScript技术实现视觉震撼的银河风格三维文本，是3D开发语言实践的一个精彩示例。

摘要由CSDN通过智能技术生成

import './style.css'
import * as THREE from "three";
import {
    OrbitControls
} from "three/examples/jsm/controls/OrbitControls";
import {FontLoader} from "three/addons/loaders/FontLoader";
import {TextGeometry} from "three/addons/geometries/TextGeometry";

/*
* 3D Text
* */

/*
* texture
* */
const textureLoader = new THREE.TextureLoader()
const matcapTexture = textureLoader.load('../static/textures/matcaps/3.png')

/*
* fonts
* font — THREE.Font的实例。
size — Float。字体大小，默认值为100。
height — Float。挤出文本的厚度。默认值为50。
curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。
bevelEnabled — Boolean。是否开启斜角，默认为false。
bevelThickness — Float。文本上斜角的深度，默认值为20。
bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
bevelSegments — Integer