提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
课程要点:
1.要使用的字体 字体加载器 FontLoading()
引入: import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
const fontLoading = FontLoading() // 133 版本之后使用这种写法
但是和纹理加载器使用方式不同
文字立方体
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
const textGeometry = new TextGeometry() // 133版本之后需要使用这种写法
bounding 边界
边界是与几何形状相关的信息,它告诉我们几何体占用的空间信息
为什么three.js有盒子和球体边界,这种称之为平截体剔除
平截体剔除:是关于渲染和不渲染对象,如果对象在摄像机后面,则不希望渲染
默认情况下使用球形边界,下面中使用框边界,计算来让文字剧中
textGeometry.computeBoundingBox()
一、代码
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'lil-gui'
import { FontLoader } from 'three/examples/jsm/loaders/fontloader.js'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
/**
* Base
*/
// Debug
const gui = new dat.GUI()
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const matcapTexture = textureLoader.load('/textures/matcaps/1.png')
/*
Axes helper
*/
const axesHelper = new THREE.AxesHelper()
scene.add(axesHelper)
/*
FontLoading
*/
const fontloader = new FontLoader()
fontloader.load(
'/fonts/helvetiker_regular.typeface.json',
(font)=>{
const textGeometry = new TextGeometry(
'Hello Three.js',
{
font, // 字体格式
size:0.5, // 大小
height:0.2, // 高度
curveSegments:5,
bevelEnabled:true, // 斜切面启动
bevelThickness:0.03, // 斜面的厚度
bevelSize:0.02, // 斜切面 会影响计算boundingBox 的值
bevelOffset:0, // 倒角偏移
bevelSegments:5, //
}
)
// 文字居中
// textGeometry.computeBoundingBox()
// textGeometry.translate(
// - (textGeometry.boundingBox.max.x - 0.02) * 0.5,
// - (textGeometry.boundingBox.max.y - 0.02) * 0.5,
// - (textGeometry.boundingBox.max.z - 0.03) * 0.5,
// )
// console.log(textGeometry.boundingBox)
textGeometry.center()
// const textMaterial = new THREE.MeshBasicMaterial()
const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture
// textMaterial.wireframe = true
const text = new THREE.Mesh(textGeometry,material)
scene.add(text)
// 由于相同材质和几何体 ,那么不需要每次循环都创建 ,只需要生成网格时候 ,创建多个网格,然后应用到上面
// 性能优化
const donutGeometry = new THREE.TorusGeometry(0.3,0.2,20,45)
// const donutMaterial = new THREE.MeshMatcapMaterial({matcap:matcapTexture})
for(let i=0;i<300;i++){
const dount = new THREE.Mesh(donutGeometry,material)
dount.position.x = (Math.random() - 0.5) * 10
dount.position.y = (Math.random() - 0.5) * 10
dount.position.z = (Math.random() - 0.5) * 10
dount.rotation.x = Math.random() * Math.PI
dount.rotation.y = Math.random() * Math.PI
const scale = Math.random()
dount.scale.set(scale,scale,scale)
scene.add(dount)
}
}
)
/**
* Object
*/
// const cube = new THREE.Mesh(
// new THREE.BoxGeometry(1, 1, 1),
// new THREE.MeshBasicMaterial()
// )
// scene.add(cube)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 1
camera.position.y = 1
camera.position.z = 2
scene.add(camera)
// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// Update controls
controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()
二、知识点
1.fontLoading 字体加载器
import { FontLoader } from 'three/examples/jsm/loaders/fontloader.js'
fontLoading 参数对应显示 ,参数1:引入资源,;参数:回调函数 onLoad onProgress onError
2.平截体剔除
为什么three.js有盒子和球体边界,这种称之为平截体剔除
平截体剔除:是关于渲染和不渲染对象,如果对象在摄像机后面,则不希望渲染
bounding 边界
边界是与几何形状相关的信息,它告诉我们几何体占用的空间信息
3.TextGeometry 文字立方体
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
结合字体加载器一起使用
const fontloader = new FontLoader()
fontloader.load(
'/fonts/helvetiker_regular.typeface.json',
(font)=>{
const textGeometry = new TextGeometry(
'Hello Three.js',
{
font, // 字体格式
size:0.5, // 大小
height:0.2, // 高度
curveSegments:5,
bevelEnabled:true, // 斜切面启动
bevelThickness:0.03, // 斜面的厚度
bevelSize:0.02, // 斜切面 会影响计算boundingBox 的值
bevelOffset:0, // 倒角偏移
bevelSegments:5, //
}
)
}
)
TextGeometry(text : String, parameters : Object)
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。
如何文字居中,一种就是获取文字立方体的边界位置,通过计算实现textGeometry.computeBoundingBox()
textGeometry.computeBoundingBox()
textGeometry.translate(
- (textGeometry.boundingBox.max.x - 0.02) * 0.5,
- (textGeometry.boundingBox.max.y - 0.02) * 0.5,
- (textGeometry.boundingBox.max.z - 0.03) * 0.5,
)
或者直接
textGeometry.center()
让我们在字体周围创建甜甜圈,看起来好看一点
TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)
radius - 环面的半径,从环面的中心到管道横截面的中心。默认值是1。
tube — 管道的半径,默认值为0.4。
radialSegments — 管道横截面的分段数,默认值为12。
tubularSegments — 管道的分段数,默认值为48。
arc — 圆环的圆心角(单位是弧度),默认值为Math.PI * 2。
文章来源:https://www.toymoban.com/news/detail-857335.html
总结
无语!文章来源地址https://www.toymoban.com/news/detail-857335.html
到了这里,关于【Three.js基础学习】8.3D Text的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!