ThreeJS 骨架图显示、骨骼修改颜色

ThreeJS 骨架图显示、骨骼修改颜色

郭隆邦_技术博客 http://www.yanhuangxueyuan.com

http://www.yanhuangxueyuan.com/Three.js/

案例

http://www.yanhuangxueyuan.com/threejs/examples

骨架图显示

http://www.yanhuangxueyuan.com/threejs/examples/#webgl_loader_bvh

骨架图 显示不同颜色

原本是使用 var skeletonHelper = new THREE.SkeletonHelper(SkinnedMesh) 骨架辅助显示，做出的骨架动画。

但查了 SkeletonHelper 并没有查到有设置颜色的方法、参数。

但世上哪有无缘无故的颜色，辅助显示的 一端蓝色、一端绿色 肯定也是代码做的。因此，别怕麻烦，来看源码吧：

1. 先下载源码，找到 案例里的 html 文件 webgl_loader_bvh.html

   可以看到 它是加载了个 bvh 模型文件，也是使用 SkeletonHelper 显示出的
   

2. 往里找
   

   继续往里找

   

   找到了

   

   这不就是在设置颜色么，color1、color2是 蓝色和绿色。

3. 仔细分析下

   bons是 所有骨骼，for循环中 对每个骨骼 都往colors中扔了3个 数值；

   点到 Color 类中，看 r、g、b 就是 红绿蓝 三原色的值。

   另外 如果 只有 r一个参数，那么就把r当作 十六进制颜色值，这不就简单了。
   

4. 那么我们怎么实现修改颜色呢？

   设置颜色的地方可以看到，源码中是使用

   geometry.setAttribute('color', new Float32BufferAttribute(colors, 3));

   来设置颜色的。

   因此 在外面，我们自己生成颜色值。重新设置一遍就可以了

5. 试一试

   在 外面 html 中，添加我们自己的代码：

   1. bones 已经有了

   2. 新建个 colors 列表，同样 for 循环，设置colors值。 当然 color1、color2 按照我们想要的来设置

   3. 最后 可以通过 skeletonHelper.geometry 获取到 geometry，同样的 setAttribute 设置一下颜色

      需要注意的是，复制出来的代码里 new Color new Float32BufferAttribute 是不行的，需要改成 new THREE.Color()、new THREE.Float32BufferAttribute()

   4. 完事！

   5. 测试一下

      我这里是用idea打开的，直接可以在此html上右键，Open in -> Browser -> Chrome 打开

      

      

   6. 如果想设置单色。colors.push 的时候，就添加两个一样的颜色即可

      

   7. 另外 THREE.Color 是支持 16进制颜色代码的

      

   8. 最后，如果想要 每个bones颜色不同呢？

      

      这里只是用2取余，区分了下颜色。

      想设置头部颜色、左腿颜色。。。之类的话，思路一样，看一下 bones 一共有多少个，分别是哪个骨骼，对应设置即可。

6. 总结

   虽然 SkeletonHelper 没有提供设置颜色的方法、参数供我们调用的去设置；

   但既然它设置好了 绿色-蓝色，那就肯定有设置的源码存在。

   找到它、模仿它，就成功了！

   扒源码的快乐~