【Three.js基础学习】8.3D Text

这篇具有很好参考价值的文章主要介绍了【Three.js基础学习】8.3D Text。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

  课程要点:

    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 边界

    边界是与几何形状相关的信息,它告诉我们几何体占用的空间信息

【Three.js基础学习】8.3D Text,three.js基础学习,学习,vue,javascript

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

【Three.js基础学习】8.3D Text,three.js基础学习,学习,vue,javascript

让我们在字体周围创建甜甜圈,看起来好看一点

TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)

radius - 环面的半径,从环面的中心到管道横截面的中心。默认值是1。
tube — 管道的半径,默认值为0.4。
radialSegments — 管道横截面的分段数,默认值为12。
tubularSegments — 管道的分段数,默认值为48。
arc — 圆环的圆心角(单位是弧度),默认值为Math.PI * 2。

【Three.js基础学习】8.3D Text,three.js基础学习,学习,vue,javascript


总结

无语!文章来源地址https://www.toymoban.com/news/detail-857335.html

到了这里,关于【Three.js基础学习】8.3D Text的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js 3D建模必备基础

    在 three.js 中,可见对象由几何体和材质构成。 我们已经了解了如何创建适用于点和线图元的简单几何图形,并且遇到了各种标准网格几何图形,例如 THREE.CylinderGeometry 和 THREE.IcosahedronGeometry。 在本节中,我们将了解如何从头开始创建新的网格几何体。 我们还将了解 three.js

    2023年04月09日
    浏览(38)
  • three.js实现点击事件(vue)

    1.加载模型(通过点击模型触发事件) 2.通过射线获取到事件源 (new THREE.Raycaster()和new THREE.Vector2()) 3.通过点击到该模型使用名字匹配 clickedObject.name==“xx” addEventListener监听事件触发 创建 Raycaster和Vector2 计算鼠标或触摸点的位置 (这里的event是通过事件监听获取) 更新射线

    2024年02月16日
    浏览(50)
  • 【案例】3D地球(vue+three.js)

    需要下载插件 有人找不到合适的地球平面图的话,可直接地球平面图

    2024年02月06日
    浏览(42)
  • three.js 基础认识与简单应用

    学习总结初衷:          1. 公司项目需要。         2. 做一下笔记,方便以后学习查看,好记性不如烂笔头;也能筑固基础,加深印象。         3. 现在国内关于Three.js的学习资料很少,总结一下多多少少也能给有需要的小伙伴一些帮助。 1. 什么是three.js?你将它理解成

    2024年02月03日
    浏览(46)
  • 如何学习three.js

    学习three.js最好的方法是通过理解它的核心概念和最常用的组件。 除了透视相机,还有正交相机(OrthographicCamera). 不说八股文,就说在实战中的体验: 透视相机,在左右移动时,会变形(会有一种拉扯的感觉); 正交相机不会有拉扯的感觉 上面这三句是你 在用到渲染器时,必定要写的

    2024年01月17日
    浏览(39)
  • three.js学习

    三大组建:场景(scene),相机(camera),渲染器(renderer) 创建三要素代码: 一. 场景 在three.js中场景就只有一种,就是用var scene = new THREE.Scene();来表示 总结:场景是所有物体的容器,如需使用就把物体放到场景中就可以。 二. 相机 相机有很多种,场景中的角度(参数)不同,显示出来

    2024年02月14日
    浏览(34)
  • Vue+Three.js建造3D小房子

    前言 一、Three.js简介 二、开发步骤 1.安装Three.js 2.创建容器 3.创建模型 总结 3D模型给人一种更真实的感受,带来极致的视觉体验。本文介绍Vue结合Three.js开发3D小房子,接触过OpenGL的小伙伴看起来会更轻松一点。 Three.js,一个WebGL引擎,基于JavaScript,可直接运行GPU驱动游戏与

    2024年02月07日
    浏览(37)
  • vue3项目中使用three.js

    在vue3项目中,通过three.js使用了一段短小但完整的代码实现了实际的三维效果图。 Three.js是一个轻量级,跨平台的Javascript库,可以在浏览器上结合HTML5的canvas,SVG或者WebGL,创建和展示3D模型和动画。 Three.js允许我们在不依赖任何浏览器插件的情况下,创建一个GPU加速的3D动画场

    2024年01月23日
    浏览(52)
  • three.js实现vr全景图(vue)

    方法: 可以利用Threejs中的立方体或者球体实现全景图功能,把立方体或球体当成天空盒子,将无缝衔接的图片贴上,看起来就像在一个场景中,相机一般放置在中央。 three.js中文网 1、立方体实现 立方体6个面要贴上6个方向的图片,这6个图片如下所示: 实现代码如下: 图片

    2024年02月12日
    浏览(40)
  • vue2+three.js实现宇宙(进阶版)

    2023.9.12今天我学习了vue2+three.js实现一个好看的动态效果: 首先是安装: npm install three 相关代码如下:

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包