先看我实现出来的效果:(本来想实现环球影城那种效果的,自行脑补universal系列电影的开头文字环绕地球,可惜学艺不精的我就只能搞出来这种僵硬的效果了)
效果虽一般,但是通过这个过程我对threejs的使用也算是入了点门了,再来看实现过程:
按照threejs中文网的说法,一共有五种创建文字的方法:
http://www.webgl3d.cn/threejs/docs/#manual/zh/introduction/Creating-text
其中第一种只是创建了一个说明性的文字定位到了图上,和three并无关系。第二种没找到相关的例子,我怀疑用第二种想让文字动起来还要用点别的操作。第三种不谈了。第四种和第五种是网上比较推崇的方法,搜到的示例也都是这两种居多,但是我试了一下第四种,生成文字需要一种json文件(有ttf文件转换的方法),而中文文件普遍大于20mb,在项目中使用也是three直接读取json,里面的内容应该是无法压缩了,不说生产环境,我在开发环境读取本地文件都要1秒多,这要是上线了应该10秒起步,而且这个页面还是网站的首页,所以直接pass,第五种方法同理,对中文的支持也不是很好。
到此看起来出路都被堵住了,不过老话说得好,山穷水尽疑无路,柳暗花明又一村。我在找资料时找到了一篇 文章 ,介绍了使用three的canvas2drenderer渲染将中文作为贴图显示,并做出的动态弹幕的效果,然后我在源码中并没有发现这个渲染器,正如这篇文章所说的canvas2drenderer已经被废弃了......不过既然是废弃了,应该是有替代品的,果然我发现了一个css2drenderer和css3drenderer。
(见 https://github.com/mrdoob/three.js/tree/dev/examples/jsm/renderers )
之后最重点的部分来了:在three中文网的示例中我终于找到了一个 行星绕转 的例子,由此文字公转的公式我算是在这个例子的源码中找到了:x坐标做正弦改变,z坐标做余弦改变。因为行星绕转即使不需要自转用户也看不出太大的区别,但是文字不一样,文字是一个长方形,公转的同时还需要缓慢自转,公转一周之时自转也需要恰好一周。所以需要一个沿y轴的自转角度用来处理自转变化(通过2d渲染器无法实现自转,按照CSS2DRenderer的描述,唯一支持的变换是位移,可能旋转变化不属于位移??),最后我参考了几个3d渲染器的示例来实现自转变化(其实就是改变3d对象的rotation属性,2d对象没有找到这个属性)。
最后需要说明一下这个实现方法算是另辟蹊径吧,因为threejs本身是靠WEBGL作为渲染器的,而我使用的是CSS3DRenderer渲染器,正如官网所说: CSS3DRenderer用于通过CSS3的transform属性, 将层级的3D变换应用到DOM元素上。......然而,这一渲染器也有一些十分重要的限制:1.它不可能使用three.js中的材质系统。2.同时也不可能使用几何体。 本质上我用的其实还是css3动画,只不过使用了three提供的一些api方便了实现过程罢了。
首先安装three什么的就不说了,先看引入方式
创建threejs基本的场景需要“三件套” 渲染器,照相机,场景对象。执行渲染器的render方法就能渲染出three的场景,如果周期改变属性再渲染就能实现动画了。
说明:
这个动画的结局当然是被产品经理否决了,最终在我建议下改成了文字块进行小范围平面上下移动——这也是在很多网站中能看到的效果。不过这么折腾了几天我也算对threejs有了一个初步的了解吧。这种东西对我来说很难通过所谓的爱好来驱动学习......另外,上一次在文章中提到失败狮这个词的时候我还是海军提督,没想到3年后的现在却成为魔法师了(~ ̄▽ ̄)~
three.js 用中文字作为贴图
three官网案例1
three官网案例2
<p>假设这是一个段落,假设这是一个段落假设这是一个段落假设这是一个段落假设这是一个段落假设这是一个段落<img src="test.jpg" style="float:left" />假设这是一个段落假设这是一个段落假设这是一个段落假设这是一个段落假设这是一个段落</p>说明:最简单的图文并茂是非常简单的,直接把img标签加入到文字中,给图片设置float即可,如果位置不合适可以调整img在文字中的位置,这种字体会自动环绕图片。