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>

结果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/52504.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第二证券:A股公司中期分红踊跃 红利资产获机构关注

A股公司2024年半年报正在密布宣布&#xff0c;上市公司中期分红计划备受商场重视。据统计&#xff0c;到8月26日&#xff0c;有中期分红计划的A股公司近370家&#xff0c;创下前史新高。业内人士称&#xff0c;得益于政策层面的生动引导&#xff0c;上市公司分红“大军”敏捷扩…

网络基础:理解 IP 地址与网段(网段是什么,网段与IP地址)

前言 在计算机网络中&#xff0c;网段 和 IP地址是网络通信中的两个至关重要的概念&#xff0c;但它们并不相同。这里来介绍一下它们之间的关系&#xff0c;简单记录一下 一. 网段 网段是指一个 IP 地址范围&#xff0c;通常由一个 IP 地址和一个子网掩码共同定义。子网掩码用…

2025秋招大语言模型落地实践面试题

本文系统地从计算力基础设施、软件架构、数据资源、应用场景和脑科学五大核心维度对大模型实践中的问题进行解答 以下是根据您的推文生成的目录: 下面是按照原文的问题重新整理的目录: 目录 计算力基础设施 1.1 什么是云边端协同架构?1.2 信息技术应用创新计划相关政策对企…

5、计算属性的使用

其实计算属性的get和set是不关联的&#xff1b;get时是跟双向绑定的数据有关&#xff0c;当那个数据变化的时候就触发一下get&#xff0c;更改状态。set时就是处理当改数据变化时&#xff0c;进行的一些处理 <template><div><h1>hi {{msg}}</h1><!…

赛博朋克游戏 各种游戏定制开发 软件定制开发 游戏开发 区块链游戏开发

赛博朋克&#xff0c;是“控制论”与“朋克”的合成词。字面意思&#xff0c;就是对“机械文明”的反思。该背景大多描绘在未来&#xff0c;建立于“低端生活与未来科技结合”的基础上&#xff0c;拥有先进科学技术&#xff0c;再以一定程度崩坏的社会结构做对比。之后&#xf…

在Ubuntu系统中安装R语言并使用R Markdown

官方提供的R语言安装教程&#xff1a;全面的 R 存档网络 (tsinghua.edu.cn) 在安装之前先使用命令更新软件列表&#xff0c;命令中的 - qq 参数用于减少命令执行时的输出信息。 # update indices sudo apt update -qq 安装依赖项&#xff1a;dirmngr&#xff08;用于管理密钥…

mysql的聚簇索引、非聚簇索引、回表

1.聚簇索引和非聚簇索引 聚簇索引&#xff08;聚集索引&#xff09;&#xff1a;数据和索引放在一起&#xff0c;B树的叶子节点存放了整行数据&#xff0c;有且只有一个。 【主键索引和唯一索引&#xff0c;主键唯一&#xff0c;存放的是主键对应的整行数据】非聚簇索引&#…

Linux(文件的查找和解压缩)

1、文件查找 1.1、find命令 查找符合条件的文件。 #在根目录下查找name名称为a.txt的文件 find / -name a.txt #在根目录下查找name名称为a.开头的文件 find / -name a.* #查找opt目录下&#xff0c;大于200M的文件 find /opt -size 200M #查找opt目录下&#xff0c;小于200…

阿里云服务器部署Sonic总结

1.购买阿里云服务器 访问阿里云官网&#xff0c;选择合适的云服务器购买 购买成功后创建ECS云服务器 下载Alibaba Cloud Client 创建AccessKey并保存 打开Alibaba Cloud Client&#xff0c;添加账号 2.安装docker 选择操作—>启动远程连接(SSH) snap install docker doc…

PostgreSQL 与对象存储的结合: 在 MinIO 中访问外部数据

数据领域最激动人心的发展之一是湖仓一体功能在所有主要数据库供应商中的兴起。Snowflake 和 SQL Server 长期以来一直采用这一点&#xff0c;现在 PostgreSQL 正在通过 pg_lakehouse 拥抱这种范式转变&#xff0c;使得利用现代数据湖进行分析、AI 等比以往任何时候都更容易。随…

vscode开发小程序

1 安装 "微信小程序开发工具" 2 安装 "WXML - Language Service" 3 安装 "wxmp-api-plugin" 或 "wechat-snippet" 4 安装"WXSS"

一句话概括TMMi的每个PA

TMMi&#xff08;Test Maturity Model Integration&#xff0c;测试成熟度模型集成&#xff09;是一个由TMMi基金会开发的非商业化的测试成熟度模型&#xff0c;是对CMMI模型的一个补充。它可以帮助组织使测试过程从未管理的状态进化为已管理、已定义、已测量和优化的状态。 T…

BeautifulSoup4通过lxml使用Xpath定位实例

有以下html。<a>中含有图片链接&#xff08;可能有多个<a>&#xff0c;每一个都含有一张图片链接&#xff09;。最后一个<div>中含有文字。 上代码&#xff1a; import requests from bs4 import BeautifulSoup from lxml import etreeurlhttps://www.aaabb…

Spark MLlib模型训练—分类算法Binomial Logistic Regression

文章目录 Spark MLlib模型训练—分类算法Binomial Logistic Regression二项逻辑回归的原理使用 Spark 实现二项逻辑回归模型参数调整与应用场景总结Spark MLlib模型训练—分类算法Binomial Logistic Regression 二项逻辑回归(Binomial Logistic Regression)是一种用于处理二…

springboot物流信息管理系统—计算机毕业设计源码23895

摘要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作规…

智能计算方法与实现1|禁忌搜索算法|Rastrigin函数|压力容器设计问题

智能计算也有人称之为“软计算”&#xff0c;人们受自然&#xff08;生物界&#xff09;规律的启迪&#xff0c;根据其原理&#xff0c;模仿求解问题的算法。从自然界得到启迪&#xff0c;模仿其结构进行发明创造&#xff0c;这就是仿生学。这是我们向自然界学习的一个方面。另…

vue.js3+element-plus+typescript add,edit,del,search

vite.config.ts server: {cors: true, // 默认启用并允许任何源host: 0.0.0.0, // 这个用于启动port: 5110, // 指定启动端口open: true, //启动后是否自动打开浏览器 proxy: {/api: {target: http://localhost:8081/, //实际请求地址&#xff0c;数据库的rest APIschangeOr…

深入解析 Tomcat 的六大核心组件

文章目录 深入解析 Tomcat 的六大核心组件一、Tomcat 的六大核心组件概述1.1 Server1.2 Service1.3 Connector1.4 Engine1.5 Host1.6 Context 二、总结 深入解析 Tomcat 的六大核心组件 Tomcat 服务器是一款免费且开源的 Web 应用服务器&#xff0c;广受 Java 开发者的喜爱。由…

试除法判定质数

给定 nn 个正整数 aiai&#xff0c;判定每个数是否是质数。 输入格式 第一行包含整数 nn。 接下来 nn 行&#xff0c;每行包含一个正整数 aiai。 输出格式 共 nn 行&#xff0c;其中第 ii 行输出第 ii 个正整数 aiai 是否为质数&#xff0c;是则输出 Yes&#xff0c;否则输…

MySQL索引(二)

MySQL索引(二) 文章目录 MySQL索引(二)MySQL有哪些索引&#xff1f;MySQL的主键是聚簇索引吗&#xff1f;聚簇索引和非聚簇索引的区别什么是覆盖索引什么是回表主键问题 外键约束什么是外键什么是外键约束外键带来的问题 联合索引最左匹配原则如何建立联合索引索引下推 学习地址…