携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情 >>
前言
意犹未尽，再写一篇
文字性内容
传统艺能 DOM+CSS
通过HTML+CSS的方式，绝对定位+zIndex使文字出现在适当的位置
将文字绘制到画布中，并将其用作Texture（纹理）
Texture 创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。这个就是把文字作为纹理，然后放在平面上。
// load a texture, set wrap mode to repeat
const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping; 水平平铺
texture.wrapT = THREE.RepeatWrapping; 垂直平铺
texture.repeat.set( 4, 4 ); 重复几个像素
3D建模，导出
通过3D建模软件里设计后，导出给threeJs使用
threeJs自带的文字几何体
这里，threeJs通过fontloader引入字体json文件，然后通过TextGeometry来创建文字几何体，这里有几处坑
- 新的threeJs里已经默认不包含fontloader，而是移入了jsm内，如果是框架型工程项目，那直接import导入就可以用，如果是传统的html项目，则需要从里面复制出对应的文件，将import和export的部分改造一下，以fontLoader为例，文件开头以import的形式引入了ThreeJs的三个模块，这里需要改为变量声明的形式
const FileLoader = THREE.FileLoader
const Loader = THREE.Loader
const ShapePath = THREE.ShapePath
- fontloader加载的路径不支持本地绝对路径，需要通过http/https的方式提供路径。
loader.load( '/fonts/helvetiker_regular.typeface.json', param)
TextGeometry 的参数说明
new THREE.TextGeometry( text, parameters );
这里text是想要展示的文本 parameters包含下列参数
- font — THREE.Font的实例。
- size — Float。字体大小，默认值为100。
- height — Float。文本的厚度。默认值为50。
- curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。
- bevelEnabled — Boolean。是否开启斜角，默认为false。
- bevelThickness — Float。文本上斜角的深度，默认值为20。
- bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
- bevelSegments — Integer。斜角的分段数。默认值为3。 斜角指的是这个效果
绘制
按照惯例，文本几何体也依然需要材质去添加纹理、颜色，需要网格去呈现在页面上
let meshMaterial = new THREE.MeshNormalMaterial({
flatShading: THREE.FlatShading,
transparent: true,
opacity: 0.9
});
let mesh = new THREE.Mesh(geometry, meshMaterial);
mesh.position.set(-300, 0, 0);
scene.add(mesh);
renderer.render(scene,camera)
完整代码如下
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 500 );
camera.lookAt(0,0,0)
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
const loader = new FontLoader();
loader.load( '/fonts/helvetiker_regular.typeface.json', function ( font ) {
console.log(font)
const geometry = new TextGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
let meshMaterial = new THREE.MeshNormalMaterial({
flatShading: THREE.FlatShading,
transparent: true,
opacity: 0.9
});
let mesh = new THREE.Mesh(geometry, meshMaterial);
mesh.position.set(-300, 0, 0);
scene.add(mesh);
renderer.render(scene,camera)
}, progress => {
console.log(progress)
}, err => {
console.log(err)
} );
效果图如下
