three.js渲染中文的3D字体

2024-08-28 17:20
文章标签 js 中文 3d 渲染 字体 three

本文主要是介绍three.js渲染中文的3D字体,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

下载中文字体 引入下面的代码

点击下载
提取码: lywa

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - modifier - tessellation</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"></head><body><div id="container"></div><script type="x-shader/x-vertex" id="vertexshader">uniform float amplitude;attribute vec3 customColor;attribute vec3 displacement;varying vec3 vNormal;varying vec3 vColor;void main() {vNormal = normal;vColor = customColor;vec3 newPosition = position + normal * amplitude * displacement;gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );}</script><script type="x-shader/x-fragment" id="fragmentshader">varying vec3 vNormal;varying vec3 vColor;void main() {const float ambient = 0.4;vec3 light = vec3( 1.0 );light = normalize( light );float directional = max( dot( vNormal, light ), 0.0 );gl_FragColor = vec4( ( directional + ambient ) * vColor, 1.0 );}</script><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';import Stats from 'three/addons/libs/stats.module.js';import { TrackballControls } from 'three/addons/controls/TrackballControls.js';import { TessellateModifier } from 'three/addons/modifiers/TessellateModifier.js';import { FontLoader } from 'three/addons/loaders/FontLoader.js';import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';let renderer, scene, camera, stats;let controls;let mesh, uniforms;const WIDTH = window.innerWidth;const HEIGHT = window.innerHeight;const loader = new FontLoader();loader.load( 'fonts/Microsoft YaHei_Regular.json', function ( font ) {init( font );} );function init( font ) {camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );camera.position.set( - 100, 100, 200 );scene = new THREE.Scene();scene.background = new THREE.Color( 0x050505 );//let geometry = new TextGeometry( '周杰伦', {font: font,size: 40,depth: 5,curveSegments: 3,bevelThickness: 2,bevelSize: 1,bevelEnabled: true} );geometry.center();const tessellateModifier = new TessellateModifier( 8, 6 );geometry = tessellateModifier.modify( geometry );//const numFaces = geometry.attributes.position.count / 3;const colors = new Float32Array( numFaces * 3 * 3 );const displacement = new Float32Array( numFaces * 3 * 3 );const color = new THREE.Color();for ( let f = 0; f < numFaces; f ++ ) {const index = 9 * f;const h = 0.2 * Math.random();const s = 0.5 + 0.5 * Math.random();const l = 0.5 + 0.5 * Math.random();color.setHSL( h, s, l );const d = 10 * ( 0.5 - Math.random() );for ( let i = 0; i < 3; i ++ ) {colors[ index + ( 3 * i ) ] = color.r;colors[ index + ( 3 * i ) + 1 ] = color.g;colors[ index + ( 3 * i ) + 2 ] = color.b;displacement[ index + ( 3 * i ) ] = d;displacement[ index + ( 3 * i ) + 1 ] = d;displacement[ index + ( 3 * i ) + 2 ] = d;}}geometry.setAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );geometry.setAttribute( 'displacement', new THREE.BufferAttribute( displacement, 3 ) );//uniforms = {amplitude: { value: 0.0 }};const shaderMaterial = new THREE.ShaderMaterial( {uniforms: uniforms,vertexShader: document.getElementById( 'vertexshader' ).textContent,fragmentShader: document.getElementById( 'fragmentshader' ).textContent} );//mesh = new THREE.Mesh( geometry, shaderMaterial );scene.add( mesh );renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( WIDTH, HEIGHT );renderer.setAnimationLoop( animate );const container = document.getElementById( 'container' );container.appendChild( renderer.domElement );controls = new TrackballControls( camera, renderer.domElement );stats = new Stats();container.appendChild( stats.dom );//window.addEventListener( 'resize', onWindowResize );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {render();stats.update();}function render() {const time = Date.now() * 0.001;uniforms.amplitude.value = 1.0 + Math.sin( time * 0.5 );controls.update();renderer.render( scene, camera );}</script></body></html>

结果
在这里插入图片描述

这篇关于three.js渲染中文的3D字体的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1115403

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

vscode中文乱码问题,注释,终端,调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题,很多方法都试了,注释乱码解决了,终端又乱码,调试窗口也乱码,最后经过本人不懈努力,终于全部解决了,现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一,所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版:使用utf8-确定-然后按指示重启 2.vscode

MiniGPT-3D, 首个高效的3D点云大语言模型,仅需一张RTX3090显卡,训练一天时间,已开源

项目主页:https://tangyuan96.github.io/minigpt_3d_project_page/ 代码:https://github.com/TangYuan96/MiniGPT-3D 论文:https://arxiv.org/pdf/2405.01413 MiniGPT-3D在多个任务上取得了SoTA,被ACM MM2024接收,只拥有47.8M的可训练参数,在一张RTX

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>