想请问有什么办法用three.js做出捏脸 jslot的效果吗

来源：蜘蛛抓取(WebSpider) 时间：2018-03-21 18:06 标签： 剑灵捏脸数据
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
当我渲染一个 vox 的体素模型时，我使用 threejs 根据每个体素的坐标使用 Vector3 构成正方形再拼接成体素方块， 如下：我用了一万来个三角就渲染出来了
但是如果我想把体素块 渲染成 乐高砖的模样 如下：
我就需要在每一个上方为空的体素块上渲染一个上闭合的圆管，为了使它足够圆滑，我把它切割成 64 份，这样每一个圆柱就需要一个 64 个三角拼接成的封顶圆， 一个 64 * 2 个三角拼接成的圆管， 我一下子需要渲染上百万个三角形， fps 从 60 骤降到 30，若果渲染个大一倍或者两倍的体素模型， 我就需要渲染千万的三角形， fps 变成个位数，浏览器卡爆。 个位走过路过的大腿们，谁能帮帮我，随便一个 3d 游戏人家都不会卡啊，有什么解法没啊。。知识匮乏的弱鸡求教！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
使用多边形渲染圆管会浪费很多性能，可以试下看用置换贴图的方式来渲染顶部的圆管
最后边就是置换贴图的效果
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这种画大量相似物体的情况太好提升性能了
主要在于两点，一是减少drawCall，在three.js里面就是将多个对象合并，一次渲染出来然后就是实例化。你可以在three.js的例子里搜索instance
补充一下，要减少drawCall，实际上就是尽量将静态的对象的geometry合并为一个geometry，因为不需要对他们单独进行操作，所以可以作为一个物体来渲染。这样会大幅提升性能
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
昨天咨询一位开发者，给出了几点建议，有两点是我没有做的： 1: 把所有的圆管 装在一个几何体里。 2: 离镜头较远的圆管可以渲染的不那么圆滑（64份降低到 24 或者更低）。我会去尝试一下
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可能因为人家并没有大规模使用实时渲染吧。。。（我猜的）
该答案已被忽略，原因：不符合答题规范 - 内容不是答案，可用评论、投票替代
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我也是弱鸡，坐等大佬~
该答案已被忽略，原因：无意义的内容 - 赞、顶、同问等毫无意义的内容
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。cache file NOT exists!使用Three.js制作酷炫无比的无穷隧道特效，京程一灯文章
使用Three.js制作酷炫无比的无穷隧道特效
内容概要：
1. 其实并没有，实际的代码会比文章中提到的更复杂一点。
2. 在实际过程中，我们会改变曲线来保证管道形状变化。
3. 没有用户交互的例子不是好例子。
一些有WebGL体验的页面，浏览者有种在一个带有材质的隧道中穿梭的感受。这有赖于Three.js以及由fornasetti.com带来的灵感。
例子地址 下载资源
WebGL变得原来越流行，我们可以看到一些列的网站使用WebGL来达到惊艳且具创造力的效果。 Fornasetti 近期发布了一个网站，其中借助WebGL达到了极好的效果：让我们身临穿梭于带有不断变换背景的隧道之中的运动。最有趣的莫过于可以通过鼠标控制我们穿梭的方向。本文将分享一些类似的Three.js管道运动。注意:你的浏览器需要支持WebGL(& IE10)以便可以浏览这些例子。
Fornasetti的网站截图
在例子中我们会使用Three.js这个常用的库，来使构建WebGL效果更为便捷。在生成隧道前，我们先需要创建渲染器（renderer），场景（scene）以及相机（camera）。
当你对于使用Three.js不是那么顺畅，我建议你先阅读一些入门课程。这里提供一个Rachel Smith写的三部分的入门课程。
一旦创建好了场景（scene）我们就可以继续下面的流程：
创建一条曲线来确定隧道的形状
生成基于曲线的隧道
有赖于Three.js，我们有好用的函数用来基于一组点去创建曲线。我们首先需要计算这些点的位置，一旦完成这一步骤，我们可以用如下方法创建曲线：
在实际过程中，我们会改变曲线来保证管道形状变化。如你所见，所有的点都有相同的x，y值。目前，这条曲线还只是简单的直线。
现在我们有了一条曲线（一点也不弯），我们可以使用Three.js来创建一个隧道。为此我们需要：何体模型（用来描述管道的形状），材质（用来展示管道的视觉效果）以及最终的将几何体与材质结合成网格（mesh）。
由于运动的原理并非我最初所想，这震撼到了我，因此这是我最喜欢的部分。我最初认为隧道实际上沿相机的方向运动，之后我觉得因该让相机移动进隧道中。但这两种想法都是错误的。
实际的解决方案非常巧妙：场景中没有任何物体发生了实际的运动，发生的仅仅只是隧道贴图位置的移动.
为此，我们需要对每一帧的贴图都定义一个偏移量从而实现视觉上的运动。
没有用户交互的例子不是好例子。当你的鼠标在浏览器上移动的时候，你可以控制隧道的形状。这里的小技巧去更新我们在第一个步骤中创建的曲线。一旦曲线改变了，我们便可以借由一些过渡来更新隧道。
万事大吉？
其实并没有，实际的代码会比文章中提到的更复杂一点。但是如果你理解了以上的步骤，那么对例子是如何运作的原理会有大致的认识。如果你希望更深入地理解，查看第一个例子的源码。我已收到大量的评论。如果你依然有困惑，不要犹豫来Twitter上找我吧。
一旦你有了基础的隧道模型，你可以不同的方向来改造它。浏览一下例子可以给你一些启发！
上文中介绍过的砖块图案。
点击你的鼠标或者是点按屏幕来释放粒子彩虹！
这个例子灵感来源于科幻电影的时空穿梭。
进入你的身体，观察一下血管吧:)
为何所有的隧道都是圆的？是时候让我们穿梭在三角形的隧道中了。
在手机或平板上尝试这个例子，并通过设备朝向来控制方向！
如果你有志想成为一名真正的全栈工程师，不妨长按下面的二维码扫描并识别，会有非常专业的老师帮你制定学习计划，还有真正能够帮你提高的课程在等着你！
加老师为好友，咨询学习计划
加老师为好友，咨询课程内容
本文来自其他平台，作者京程一灯的观点不代表本网站立场，如需处理请联系客服QQ邮箱
您可能也感兴趣的3被浏览481分享邀请回答11 条评论分享收藏感谢收起利用three.js实现全景浏览的疑问_百度知道
利用three.js实现全景浏览的疑问
新人求教：现在希望用three.js来实现全景浏览，目前有的全景拼接图。但是我在网上查找的教程，都是基于全景图又获得6张立方体纹理图，然后基于THREE.ShaderLib[ &cube& ]、CubeGeometry来的。我想实现的是直接基于一张完整的全景图的浏览，我想是利用...
我有更好的答案
你说的就是skybox呀，百度three.js skybox就有源码啥的
采纳率：44%
为您推荐：
其他类似问题
神秘人的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。

我要回帖

更多关于 剑灵捏脸数据 的文章

 

随机推荐