three.js 给模型添加标注

1. 需要有一个被选择的mesh,通过raycaster获取

2. 创建先和一个平面

3. 将线和标注的面放在获取的mesh上

var mouse =new THREE.Vector2()

var raycaster =new THREE.Raycaster()

mouse.x = (event.clientX / domElement.width) *2 -1

mouse.y = -(event.clientY / domElement.height) *2 +1

raycaster.setFromCamera(mouse, camera)

var intersects = raycaster.intersectObjects(scene.children, false)// 

selectedObject = intersects[0].object// 被选中的标注对象

// 

var startP,endP// 这里也是通过raycaster获取到的

var color = parameters.hasOwnProperty("color") ? parameters.color :0x0000ff

 var lineMat =new THREE.LineBasicMaterial({

        "color": 0xff0000

})

var lineGeo =new THREE.Geometry()

lineGeo.vertices.push(startPos)

lineGeo.vertices.push(endPos)

var line =new THREE.Line(lineGeo, lineMat)

// 初始化一个sprite,这是一个始终面向相机的平面,

var sprite = new textSprite(这并不是一个构造函数,不想写那么多,自行去官网查看)

.......

sprite.scale.set(_spriteScale, _spriteScale, _spriteScale)// 设置的是sprite的大小派脊野

selectedObject.add(line)// 添加

line.worldToLocal(_endPos)// 设置点

sprite.position.copy(_endPos)// 设置sprite的位置

line.add(sprite)添加并进行关联

注: sprite可以用于进行尘喊标注热点等 *** 作,具体实现较为简单,同时因为也算是mesh,所以sprite可以设置texture,使用图片作为背景等,也可以野带把一个canvas,把需要的文字图片等都加入进来.

说到环绕动画，18年初的时候我曾写过一版太阳系动画，当然，那时完全是慢慢调试坐标然后用css动画写上去的，后来有同事把这个太阳系动画使用threejs改写了，动画变得更加顺滑流畅了，那时我只是对three有个印象，没想到3年后我也有使用到它的一天。（然鹅也并没有真的派上用场）具体需求也很简单明了：文字围绕着中心的图片进行绕转，但是文字和一个球体的区别还是蛮大的。

先看我实现出来的效果：（本来想实现环球影城那种效果的，自行脑补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渲染将中文作为贴图显示，并做出的动态d幕的效果，然后我在源码中并没有发现这个渲染器，正如这篇文章所说的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

1、打开3Dmax2012软件，先建好一个模型，并将模型的材质附好。

2、点击【创建】-【图形】-【文本】，点击作图区域，在文本编辑框中输入“MHSJS001”字样，并设置好文本的字体、大小、字距等参数。完成后点击【挤出】，设置好挤出大小参数。

3、按住【shift】键不放，鼠标向右拉动复制一个“MHSJS001”文字模型。

4、点击右边【Text】，在文本编辑框中将内容改为“梦幻设计师”，并设置好对应的字体、大小、字距参数。

5、将”MHSJS001”“和”梦幻设计师“两模型拉动至上方与原模型相交。

6、点击【创建】蠢键如-【几何体】，下方方框内选择【复合对象】。带启选中“平衡木”模型，点击【ProBoolean】，点击【亮消拾取对象】后，鼠标分别点击”MHSJS001”“和”梦幻设计师“两字体模型。

7、最后，点击【渲染】图标，对模型进行渲染。渲染完成后，点击【保存】，保存为jpg格式图片即可。

---