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

相关文章

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

RedisTemplate默认序列化方式显示中文乱码的解决

《RedisTemplate默认序列化方式显示中文乱码的解决》本文主要介绍了SpringDataRedis默认使用JdkSerializationRedisSerializer导致数据乱码,文中通过示... 目录1. 问题原因2. 解决方案3. 配置类示例4. 配置说明5. 使用示例6. 验证存储结果7.

使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

《使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)》字体设计和矢量图形处理是编程中一个有趣且实用的领域,通过Python的matplotlib库,我们可以轻松将字体轮廓... 目录背景知识字体轮廓的表示实现步骤1. 安装依赖库2. 准备数据3. 解析路径指令4. 绘制图形关键

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

Python Selenium动态渲染页面和抓取的使用指南

《PythonSelenium动态渲染页面和抓取的使用指南》在Web数据采集领域,动态渲染页面已成为现代网站的主流形式,本文将从技术原理,环境配置,核心功能系统讲解Selenium在Python动态... 目录一、Selenium技术架构解析二、环境搭建与基础配置1. 组件安装2. 驱动配置3. 基础操作模

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no

Python使用Matplotlib绘制3D曲面图详解

《Python使用Matplotlib绘制3D曲面图详解》:本文主要介绍Python使用Matplotlib绘制3D曲面图,在Python中,使用Matplotlib库绘制3D曲面图可以通过mpl... 目录准备工作绘制简单的 3D 曲面图绘制 3D 曲面图添加线框和透明度控制图形视角Matplotlib