Verge3D
  • 欢迎访问Verge3D中文用户手册
  • 入门指引(Getting Started)
    • 初学指南
    • 工作流程
    • 拼图工具
    • 功能特性
    • 项目结构
    • 更新版本
    • 常见问题
      • 3D文件格式
      • SolidWorks
      • Revit
    • 实用链接
  • 一般主题(General Topics)
    • 资产压缩
    • 基于HTML的用户界面
    • Facebook发布3D主题
    • AR 和VR的开发
    • Wordpress插件
    • 使用JavaScript
    • 移动浏览器测试
  • 3ds Max 艺术家指南(3ds Max Artist's Guide)
    • 3ds Max安装Verge3D​
    • 材质系统
    • 阴影
    • 物理材质
    • 透明度
    • 视口和渲染预览
  • Blender 艺术家指南(Blender Artist's Guide)
    • Blender安装Verge3D
    • 材质系统概述
    • 阴影
    • 物理材质
    • 透明度
    • 使用材质库
    • 视口预览
  • 拼图参考
    • Initialization(初始化)
    • Events(事件)
    • Selectors(选择器)
    • Objects
    • Materials
    • Animation
    • Camera
    • Scenes
    • Misc
    • Time
    • HTML
    • AR/VR
    • Sound
    • Physics
    • Post-processing
    • Dictionaries
    • Variables
    • Procedures
    • System
    • Library
  • 程序员指南(Programmer's Guide)
    • 编程基础
    • 矩阵变换
    • 动画系统
    • 创建文本
    • 绘制线条
    • 更新事物
    • 约定
    • 获取资源
  • 开发者参考(Developer Reference)
    • Animation
      • AnimationAction
      • AnimationClip
      • AnimationMixer
      • AnimationObjectGroup
      • AnimationUtils
      • KeyframeTrack
      • PropertyBinding
      • PropertyMixer
    • Animation / Tracks
      • BooleanKeyframeTrack
      • ColorKeyframeTrack
      • NumberKeyframeTrack
      • QuaternionKeyframeTrack
      • StringKeyframeTrack
      • VectorKeyframeTrack
    • Application
      • App
      • AppPuzzles
      • AppUtils
    • Audio
      • Audio
      • AudioAnalyser
      • AudioContext
      • AudioListener
      • PositionalAudio
    • Cameras
      • ArrayCamera
      • Camera
      • CubeCamera
      • OrthographicCamera
      • PerspectiveCamera
      • StereoCamera
    • Constants
      • Animation
      • Core
      • CustomBlendingEquation
      • DrawModes
      • DrawModes
      • Materials
      • Renderer
      • Textures
    • Constraints
      • ChildOfConstraint
      • Constraint
      • CopyLocationConstraint
      • CopyRotationConstraint
      • CopyScaleConstraint
      • FloorConstraint
      • LimitLocationConstraint
      • LimitRotationConstraint
      • LimitScaleConstraint
      • LockedTrackConstraint
      • TargetConstraint
      • TrackToConstraint
    • 开发者参考
      • Controls
      • Core
      • Core / BufferAttributes
      • Deprecated
      • Extras
      • Extras / Core
      • Extras / Curves
      • Extras / Objects
      • Geometries
      • Helpers
      • Lights
      • Lights / Shadows
      • Loaders
      • Loaders / Managers
      • Materials
      • Math
      • Math / Interpolants
      • Objects
        • Annotation
        • AnnotationControl
        • Bone
        • Group
        • Line
        • LineLoop
        • LineSegments
        • LOD
        • Mesh Points
        • Skeleton
        • SkinnedMesh
        • Sprite
      • Renderers
        • RenderUtils
        • WebGLRenderer
        • WebGLRenderTarget
        • WebGLRenderTargetCube
      • Renderers / Shaders
        • ShaderChunk
        • ShaderLib
        • UniformsLib
        • UniformsUtils
      • Scenes
        • Fog
        • FogExp2
        • Scene
        • SceneBackground
      • Textures
        • CanvasTexture
        • CompressedTexture
        • CubeTexture
        • DataTexture
        • DataTexture3D
        • DepthTexture
        • Texture
        • VideoTexture
  • EXAMPLES
    • 案例
  • MISC
    • 杂项
Powered by GitBook
On this page
  • 1. DOM + CSS
  • 2.将文本绘制到画布并用作纹理
  • 3.在您喜欢的3D应用程序中创建模型并导出到Verge3D
  • 4.程序文本几何
  • 5.位图字体
  1. 程序员指南(Programmer's Guide)

创建文本

Creating Text 待校订

有时您可能需要在Verge3D应用程序中使用文本 - 这里有几种方法可以执行此操作。

1. DOM + CSS

使用HTML通常是添加文本最简单,最快捷的方式。这是大多数Verge3D示例中用于描述性叠加的方法。

您可以向a添加内容<div id="info">Description</div>

并使用CSS标记绝对位于所有其他位置的z-index位置,尤其是在运行Verge3D全屏时。#info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; }

2.将文本绘制到画布并用作纹理

如果您希望在Verge3D场景中的平面上轻松绘制文本,请使用此方法。

3.在您喜欢的3D应用程序中创建模型并导出到Verge3D

如果您更喜欢使用3d应用程序并将模型导入Verge3D,请使用此方法

4.程序文本几何

如果您更喜欢纯粹在v3d.js中工作或创建过程和动态3D文本几何,则可以创建一个几何为v3d.TextGeometry实例的网格:

new v3d.TextGeometry(text, parameters);

但是,为了使其工作,TextGeometry将需要在其“font”参数上设置v3d.Font的实例。有关如何执行此操作的详细信息,每个接受参数的说明以及v3d.js分发本身附带的JSON字体列表,请参阅TextGeometry页面。

例子

5.位图字体

一些有用的工具:

Previous动画系统Next绘制线条

Last updated 6 years ago

如果Typeface已关闭,或者您想要使用不存在的字体,那么有一个带有blender的python脚本的教程,允许您将文本导出为Verge3D的JSON格式::

BMFonts(位图字体)允许将字形批处理为单个BufferGeometry。BMFont渲染支持自动换行,字母间距,字距调整,带标准导数的带符号距离场,多通道有符号距离场,多纹理字体等。请参阅。

库存字体在等项目中可用 ,或者您可以从任何.TTF字体创建自己的字体,优化以仅包括项目所需的字符。

(基于网络)

(命令行)

(桌面应用)

WebGL /几何/文本
WebGL / shadowmap
http
//www.jaanga.com/2012/03 /blender-to-threejs-create-3d-text-with.html
three-bmfont-text
A-Frame Fonts
msdf-bmfont-web
msdf-bmfont-xml
hiero