three.js 用中文字作为贴图

最新推荐文章于 2024-07-16 09:50:03 发布
最新推荐文章于 2024-07-16 09:50:03 发布
阅读量7k 收藏 17
点赞数 5
分类专栏： 前端 文章标签： three.js 中文字贴图 弹幕
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/towrabbit/article/details/80028485
版权

面的内容使用canvas2drenderer ，目前已经废弃，如果不想用这个可以直接 看2019年8月份补充的内容
闲来无事，把three.js其中有一个例子改了一下，变成从一个中心点喷射出中文字的例子，
效果图：
three.js中文字贴图
可以在codePen上查看效果
下面直接贴代码好了
html:

<html lang="en">
	<head>
		<title>three.js canvas - text - sprites</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}

			a {
				color: #0078ff;
			}
    @media screen and (max-width: 600px) {
				html{
					font-size:6px;
				}
			}
		</style>
	</head>
	<body>
		<div class="controls">
			<input type="text" name="danmu"  id="danmuInput"/>
			<button onclick="sendText()">发射弹幕(send)</button>
		</div>
    <div class="clear" onclick="clearAll()">
        清除(clear)
    </div>
	</body>
</html>

css只是表现层让他看起来稍微好看一点，所以不算是最重要的，除此之外写了一小部分便于在手机上浏览响应式css
css:

 @media screen and (max-width: 600px) {
				html{
					font-size:6px;
				}
			}
html{
				font-size:10px;
			}
			*{
				margin:0;
				padding:0;
				box-sizing:border-box;
			}
			.controls{
				width:40rem;
				height:20rem;
				border: 0.2rem solid #88f;
				border-radius:0.5rem;
				position:fixed;
				bottom:1rem;
				left:50%;
				margin-left:-20rem;
				background-color: rgba(155,155,255,0.1);
				
			}
			#danmuInput{
				width:30rem;
				font-size:2rem;
				text-align:center;
				background-color: rgba(155,155,255,0.6);
				color:white;
				height:3.8rem;
				line-height:3.8rem;
				margin:4rem 0 0 5rem;
				border:0.1rem solid rgba(200,200,255,0.3);
			}
			#danmuInput:focus{
				border:0.1rem solid rgba(200,200,255,0.9);
				box-shadow:none;
				outline:none;
				box-shadow:0 0 0.2rem 0.1rem rgba(200,200,255,0.9);
			}
			.controls button{
				position:absolute;
				width:20rem;
				height:4rem;
				bottom:2rem;
				left:50%;
				margin-left:-10rem;
				background-color: rgba(0,0,0,0);
				color:white;
				font-size:2rem;
				text-shadow:0 0 5px #fff;
			}
.controls button:hover{
  cursor:pointer;
  background-color: rgba(255,255,255,0.4);
  color:#00f;
}
.clear{
  width:12rem;
  height:4rem;
  background-color:rgba(255,177,255,0.1);
  position:fixed;
  top:2rem;
  right:4rem;
  font-size:2rem;
  color:white;
  font-weght:bold;
  line-height:4rem;
  text-align:center;
  text-shadow:0 0 1rem rgba(255,177,255,0.6);
  border-radius:0.4rem;
  transition: all .3s; 
}
.clear:hover{
  cursor:pointer;
  background-color:rgba(255,200,255,0.4);
  line-height:3.8rem;
  box-shadow:0 0 1rem 0.5rem rgba(255,200,255,0.2);
}
.clear:active{
  cursor:pointer;
  background-color:rgba(255,200,255,0.3);
  line-height:4.2rem;
  box-shadow:0 0 1rem 0.5rem rgba(255,200,255,0.2);
}

最关键的js部分：
前置js：
three.js
https://threejs.org/build/three.js
three.js的项目管理插件 方便
https://threejs.org/examples/js/renderers/Projector.js
tween渐变插件 有许多渐变函数可以用 用于制作动画
https://threejs.org/examples/js/libs/tween.min.js
信息搜集展示插件 可以显示帧数/每帧渲染时间，性能占用等性能信息
https://threejs.org/examples/js/libs/stats.min.js
画布渲染插件 ，因为three默认用的是webgl渲染有了这个插件可以用canvas原生2d模式渲染，添加canvas渲染器必备 并非必须 只是这里用到了
https://threejs.org/examples/js/renderers/CanvasRenderer.js

   var container, stats;
		   //首先最开始要生声明变量
			var camera, scene, renderer, particle;
			var mouseX = 0, mouseY = 0;
			var text = "弹幕";	
			
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			//初始化函数
			init();
			//动画函数 递归的方式调用
			animate();
			//初始化
			function init() {
				//	初始化canvas元素
				container = document.createElement( 'div' );
				document.body.appendChild( container );
				//创建相机
				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
				camera.position.z = 1000;
				//创建场景
				scene = new THREE.Scene();
				var color = "red";
				var material = new THREE.SpriteMaterial( {
					map: new THREE.CanvasTexture( generateSprite(text,color) ),
					blending: THREE.AdditiveBlending
				} );
				//生成100个并且每隔100ms出现一个
				for ( var i = 0; i < 100; i++ ) {

					particle = new THREE.Sprite( material );

					initParticle( particle, i * 100 );

					scene.add( particle );
				}
				//使用的渲染器是THREE的2Dcanvas渲染器而非webgl
				renderer = new THREE.CanvasRenderer();
				renderer.setClearColor( 0x000040 );//设置清屏的颜色一般来说是背景的颜色这里设置了深蓝色
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );
				//用于展现帧数等数据信息
				stats = new Stats();
				container.appendChild( stats.dom );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}
			//当网页窗口发生变化时改变canvas渲染部分的大小的函数
			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}
			//这个才是创建单个字符片段的函数
			function generateSprite(text,style) {

				var canvas = document.createElement( 'canvas' );
				canvas.width = 300;
				canvas.height = 300;

				var context = canvas.getContext( '2d' );
					context.beginPath();
					context.font='50px Microsoft YaHei';
					context.fillStyle = style;
					context.fillText(text,0,50);
					context.fill();
					context.stroke();
				return canvas;

			}
			//将例子中创建一个类似于星星的圆点的画布的函数换了名字
			function generateTextSprite() {
				//创建canvas画布
				var canvas = document.createElement( 'canvas' );
				canvas.width = 16;
				canvas.height = 16;
				//绘制
				var context = canvas.getContext( '2d' );
				//生成渐变圆点
				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
				gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
				gradient.addColorStop( 0.2, 'rgba(0,255,255,1)' );
				gradient.addColorStop( 0.4, 'rgba(0,0,64,1)' );
				gradient.addColorStop( 1, 'rgba(0,0,0,1)' );
				
				context.fillStyle = gradient;
				context.fillRect( 0, 0, canvas.width, canvas.height );

				return canvas;

			}
			function initParticle( particle, delay ) {

				var particle = this instanceof THREE.Sprite ? this : particle;
				var delay = delay !== undefined ? delay : 0;

				particle.position.set( -500, 0, 0 );
				particle.scale.x = particle.scale.y = 300 /*Math.random() * 32 + 16*/;
				//用了线性函数插件
				new TWEEN.Tween( particle )
					.delay( delay )
					.to( {}, 10000 )
					.onComplete( initParticle )/*这是一个递归 用于持续产生 间隔10s钟*/
					.start();

				new TWEEN.Tween( particle.position )
					.delay( delay )
					.to( { x: Math.random() * 4000 - 2000, y: Math.random() * 1500 - 750, z: Math.random() * 4000 - 2000 }, 10000 )
					.start();

				new TWEEN.Tween( particle.scale )
					.delay( delay )
					.to( { x: 0.03, y: 0.03 }, 10000 )
					.start();

			}

			//

			function onDocumentMouseMove( event ) {
				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;
			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length == 1 ) {

					//event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;

				}

			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length == 1 ) {

					//event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;

				}

			}

			//

			function animate() {
				requestAnimationFrame( animate );
				render();
				stats.update();
			}

			function render() {
				TWEEN.update();
				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
				camera.lookAt( scene.position );
				renderer.render( scene, camera );

			}
			
			function changeText(t){
				if ( t != ''){
					text = t;
				}
				console.log("nyan");
				return text;
				
			}
			function changeTextAndShow(text,color){
				//确定材料
				//检测在场景中是否过多材料
				if(scene.children.length>2000){return;};
				var material = new THREE.SpriteMaterial( {
					map: new THREE.CanvasTexture( generateSprite(text,color) ),
					blending: THREE.AdditiveBlending
				} );
				
				//生成 并且加入到渲染环境中
				for ( var i = 0; i < 10; i++ ) {
					particle = new THREE.Sprite( material );
					initParticle( particle, i * 10 );
					scene.add( particle );
				}
				console.log("nyan");
			}
			function sendText(){
			
				var texts = document.getElementById("danmuInput").value;
				if(texts == '')return;
				var color = getRandomColor();
				changeTextAndShow(texts,color);
     console.log("nyannnnn");
			}
			function getRandomColor(){
				var color = "rgba(" + Math.floor(Math.random() * 155 + 100 ) + "," +
									Math.floor(Math.random() * 155 + 100) + "," +
									Math.floor(Math.random() * 155 +100) + "," +
									(Math.random() * 0.5 + 0.5) + ")";
				return color;
			}
			//个人恶趣味
			setTimeout('changeTextAndShow("惊吓","yellow")',2000);
    setTimeout('changeTextAndShow("nyancat","blue")',3000);
    setTimeout('changeTextAndShow("QwQ","rgba(233,155,233,0.6)")',4000);
    changeTextAndShow("惊吓","green");
    function clearAll(){
				scene.children.splice(0,scene.children.length);
    }
    //个人恶趣味 清空之后如果屏幕内没有弹幕则会过11秒加入10个弹幕，鉴于循环周期是10秒所以110秒之后有会有10秒的循环
  function showTextWhenNoTextHere(){
    if(scene.children.length>100){return;}
    else{
      console.log("show more");
      changeTextAndShow("寂寞弹幕","yellow");
    }
  }
setInterval("showTextWhenNoTextHere()",11000);

最后的效果：
https://codepen.io/towrabbit/full/JpqwZy/

2019年8月份补充

如果需要单纯的用于展示字的透明图片 使用精灵(sprite)的方式是最好的 因为其面向相机的特性。在哪个角度都能够看清楚。非常适合做辅助用的标记。当然还有另外一种方法，将three中的世界坐标转为屏幕坐标，根据此坐标更改dom的位置也是可以作为标记的，各有优缺点， 此处为大佬世界坐标转为屏幕坐标的例子:101 Three.js 场景世界坐标和平面二维坐标互转

下面为我使用的方法，
结果是这样子的：
three.js图表标记

(function(undefined) {
    "use strict"
    var _global;
    var TextTool = {
        initTextCanvas:function(options){
            var settings
            if(typeof options === 'undefined'){
                console.log('没有传入任何从参数 字是白色的');
                settings = {
                    canvasW : 1000,
                    canvasH : 1000,
                    text:'测试文字',
                    fontColor: 'black',
                    font:'40px 微软雅黑'
                }
            }else{
                settings = {
                    canvasW : options.canvasWidth || 256,
                    canvasH : options.canvasHeight || 256,
                    text: options.text || '测试文字',
                    fontColor: options.color || 'white',
                    font:options.font || '40px 微软雅黑'
                }
            }
            var canvas = document.createElement('canvas')
            canvas.width = settings.canvasW
            canvas.height = settings.canvasH
            var ctx = canvas.getContext('2d')

            ctx.font = settings.font
            ctx.fillStyle = settings.fontColor
            ctx.textAlign = 'center'
            ctx.fillText(settings.text,settings.canvasW/2,settings.canvasH/2);

            return canvas;

        },
        initTextSprite:function(canvas){
            var spriteMaterial = new THREE.SpriteMaterial({map:new THREE.CanvasTexture(canvas)})
            var TextSprite = new  THREE.Sprite(spriteMaterial)
            return TextSprite
        }
    }
    // 最后将插件对象暴露给全局对象
    _global = (function(){ return this || (0, eval)('this'); }());
    if (typeof module !== "undefined" && module.exports) {
        module.exports = TextTool;
    } else if (typeof define === "function" && define.amd) {
        define(function() { return TextTool;});
    } else {
        !('TextTool' in _global) && (_global.TextTool = TextTool);
    }
}());

就是绘制在一个2d的canvas平面上，再作为材质放到Sprite（精灵）上
使用方式为：

var canvas = TextTool.initTextCanvas({
	text: '文字'
})
var textSprite = TextTool.initTextSprite( canvas );
textSprite.position.set(0,1,0);//设置位置

该方法的优点：

  • 通过canvas先渲染的贴图，然后再放到3d场景中 基于原生canvas2d的文字渲染
  • 有相对来说比较方便的排版方式，基本够用
  • 更文字的方式是更新贴图

该方法的缺点:

  • 在进行缩放或者旋转的时候可能会糊（可以通过增加文字的大小解决，但是增加文字大小相当于增加贴图的精度）
  • 如果文字更新频率过高，canvas2d在光栅化的时候会卡。

适合大段的不更新的字，或者小段的更新没有那么频繁的字。

2020年8月份补充

  • 可以使用字体文件生成geometry的相当于模型的文字，其优点是其展现是矢量的。在英文中可以使用map表对各个英文字符进行文字mesh的实例化，并通过维护一个位置表来展示渲染内容。英文主要是26*2 个大小写字符还有一些标点符号，如果使用特殊字体，字体文件也比较少。可以通过这样的方式生成
  • 模型文字不是非常适合大量的中文字符，因为每个中文字符就种类的单个字符来说非常丰富，这就导致不适用使用索引表的方式使用实例化的模型进行拼接。这会有非常大量的三角面。并且如果字符是会经常的动态更改的话，在创建的时候也会遇到性能问题。
  • 如果需要更多的相关的在webgl中渲染文字的技巧请看这篇博客，目前是生的英语:
  • 使用webgl的文字渲染技术
towrabbit
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js - 使用 ShapeGeometry 创建二维字体模型
ithanmang
07-03 3347
效果图 构造函数 ShapeGeometry(shapes, curveSegments) shapes – shapes数组或者是单一的shape curveSegments – [可选的] 形状的分段数，默认值是 12 其父类是Geometry 示例 创建一个心的形状 var x = 0, y = 0; var heartShape = new THREE.Shape...
HTML5+Three.js酷炫烟雾文字背景动画特效
06-11
在文字背景部分，开发者可能使用了Three.js的TextGeometry或者THREE.FontGeometry，这两种几何体可以将文本转化为3D形状。然后，将这些几何体与材质（Material）结合，如MeshBasicMaterial或MeshPhongMaterial，以...
three.js增加文字作为贴图使用
qq_39966730的博客
12-01 1179
three.js增加文字作为贴图使用
Three.js常见的贴图类型及其用途
最新发布
weixin_42776027的博客
07-16 626
每种贴图都有其独特的作用，通过合理组合和使用这些贴图，可以极大地提升3D模型的视觉质量和真实感。这种贴图可以是立方体贴图（Cubemap）或球面环境贴图（Spherical Environment Map），用于捕捉全景环境，使物体表面能够反映出周围环境的细节。位移贴图是最具真实感的贴图类型之一，它实际上会改变模型表面的几何形状，根据贴图中的数据来移动顶点位置，从而创建真实的物理凹凸效果。除了之前提到的贴图类型，Three.js还支持一些其他类型的贴图，用于更高级的视觉效果和物理模拟。
Three.js基于Canvas的文字贴图
漫漫漫漫的博客
12-28 1642
Three.js基于Canvas的文字贴图 居中对齐，对中文文字做了长度兼容处理，可更具开发需求自行构造Canvas贴图 const createLabel = () => { const name = "马达加斯加的企鹅们正在快乐的玩耍"; const canvas = document.createElement("canvas"); const color = "#dddddd"; const fontSize = 50;
Three.js杂记（十）——贴图
苦作舟的空城机
02-28 9018
纹理贴图贴图介绍简单的纹理贴图 贴图介绍 纹理贴图是Threejs一个很重要的内容，游戏、产品720展示、物联网3D可视化等项目程序员加载模型的同时同时需要处理纹理贴图。 简单的纹理贴图
ThreeJS 模型中内嵌文字
jinse29的博客
08-29 780
之前有过模型中内嵌html网页，地址☞这次是纯粹的在模型中嵌入文本信息，进行简单的文字展示展示效果图。
threejs将文字贴到物体面
m0_65720832的博客
11-28 713
【代码】threejs将文字贴到物体面。
Three.js 实现年会3D抽奖页面
03-12
Three.js是一个基于WebGL的JavaScript库，它允许开发者在浏览器中创建丰富的3D图形和交互式体验。 首先，我们需要理解Three.js的核心概念。WebGL是一种在浏览器中渲染3D图形的API，而Three.js则是对WebGL的一层封装...
Three.js 画3维图形Demo
01-07
至于“视频”，Three.js允许我们将视频作为纹理贴图应用到3D物体上。通过VideoTexture和VideoElement，可以实时地将视频流映射到物体表面，实现动态视觉效果。 在压缩包中的"threejsdemo"可能包含了以下内容：HTML...
three.js全息光影动画特效.zip
10-09
three.js是一款基于WebGL的JavaScript 3D库，它使得在浏览器中进行3D图形编程变得简单易行。全息光影动画是一种通过模拟光的反射、折射和散射等现象，使3D模型显得更加真实和生动的技术。 【描述】中的“非常实用的...
Three.js实现绘制字体模型示例代码
10-19
最近在学习three.js，这篇文章属于系列文章，下面这篇文章主要给大家介绍了关于Three.js如何绘制字体模型的相关资料，通过文中介绍的方法实现的效果非常的赞，需要的朋友可以参考借鉴，下面来一起看看吧。
three-spritetext:ThreeJS的基于Sprite的文本组件
04-27
三子文字 基于Sprite的文本组件。 文本被绘制到画布上，转换为，然后用作上的材质。 由于正在使用精灵，因此文本将始终面向相机，并且其方向相对于相机固定。 快速开始 import SpriteText from 'three-spritetext'; 或者 var SpriteText = require('three-spritetext'); 甚至 [removed][removed] 然后 var myText = new SpriteText('My text'); var myScene = new THREE.Scene(); myScene.add(myText); API参考 建设者 SpriteText （[ text ， textHeight ， color ]） 特性 财产 描述 默认 文本 要在
THREE.TextSprite:最佳地将文本显示为精灵
05-09
三.TextSprite class THREE.TextSprite extends THREE.Sprite 最佳地将文本显示为精灵。 演示 依存关系 设置 npm npm i @seregpie/three.text-sprite import TextSprite from '@seregpie/three.text-sprite' ; 浏览器 < script src =" https://unpkg.com/three " > </ script > < script src =" https://unpkg.com/@seregpie/three.text-texture " > </ script > < script src =" https://unpkg.com/@seregpie/three.text-sprite " > </ script > 该类可作
html5+three.js科幻地球仪3D旋转动画特效.zip
09-27
Three.js是基于WebGL的JavaScript库，专门用于在浏览器中创建3D图形，无需用户安装任何插件。这个项目展示了如何将HTML5与Three.js结合，以实现引人入胜的视觉效果。 首先，`index.html`是网页的主文件，它包含了...
ThreeJS给模型添加介绍文字（贴在模型上 不会一直面向我们）
qq_1336674576的博客
06-18 429
threejs给模型添加文字
three.js模型贴花贴标效果DecalGeometry
X01动力装甲的专栏
03-19 2802
three.js模型贴花贴标效果DecalGeometry three.js官网很早之前就有这个案例：https://threejs.org/examples/webgl_decals.html 只是看的很神奇，没有深入研究。因为没有想到可以用到什么地方。后来想到可以给模型局部贴牌子，比如衣服贴logo，图片文字什么的，很方便。 DecalGeometry 贴花几何可以用来创建贴花网格，用于不同...
three.js 基础配置以及模型上添加图片文字
weixin_44268120的博客
11-29 533
three.js 基础配置以及模型上添加图片文字
【ThreeJs】如何给模型打上文字标签？
热门推荐
IT飞牛
03-11 1万+
ThreeJs渲染中创建的网格模型，有时候我们需要给模型添加标签文字，方便识别不同的物体。这时候我们可以使用这两个库，里面提供了三种打标签的方式，随着相机角度的变化，三种标签的显示效果各不相同。
Three.js之绘制中文文字并跟随物体,canvas,贴图
06-08
好的，这是一个关于Three.js中绘制中文文字并跟随物体，使用canvas和贴图的问题。我可以给您提供一些思路和参考。 1. 绘制中文文字 在Three.js中绘制中文文字需要用到canvas，可以使用canvas的绘图API绘制中文文字...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值