ThreeJS学习(一)-----模型生长

  刚接触threejs的时候有个任务是写出模型增长的效果,当时经验不足,没有想到合适的方法,只能在模型上方增加一个个小模型堆积而成。这种方法很不科学,不仅视觉效果不好,而且消耗性能。
  昨晚从一次公开课有了灵感,可以通过改变物体的scale来实现物体一个或多个方向的增长。

1.两端增长

  以改变长方体的x方向为例,代码如下,可以实现模型两边增长。

         var geometry = new THREE.BoxGeometry(1, 1, 1);
            var material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide, transparent: true, opacity: 1.0 });
            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(10, 4, 60);
            scene.add(mesh);
            console.log(mesh)
            setInterval(() => {
                mesh.scale.x+=0.1
            }, 30);

2.单方向增长

  控制物体的scale变化实际上是在底层控制vertices的变化,scale是对有关面的vertice同时控制。因此可以直接改变单侧面的vertices来实现模型单向生长的视觉效果,代码如下。

            var geometry = new THREE.BoxGeometry(1, 1, 1);
            var material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide, transparent: true, opacity: 1.0 });
            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(10, 4, 60);
            scene.add(mesh);
            console.log(mesh)
            setInterval(() => {
                if (mesh.geometry.vertices[0].x < 100) {
                    for (var i = 0; i < 4; i++) {
                        mesh.geometry.vertices[i].x += 0.3;
                        mesh.geometry.verticesNeedUpdate = true;  //控制物体单向增长
                    }
                }
            }, 30);

  记得更新相关的矩阵,在threejs中改变顶点位置需要将verticesNeedUpdate的值改为true,需要在每一次改变时赋值。其官方说明如下图:


ivertices变化.png

3.小结

  从上面的例子可以知道,很多时候要改变思维模式,多去挖掘变化的底层是怎样实现的,这样有助于解决问题,不应该只会改变物体的position、rotation。加油^ - ^.........

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 南方的天气就是这样多变,中午才下过一场大暴雨,好不容易晴朗了一会,晚上又来了一场大雨,下了半个小时才停歇。窗外的马...
    凤芷楼阅读 1,976评论 14 11
  • 上午英语list1 试卷加改正 下午英语list2 带本书看看可以 晚上会计从业基础加a...
    盘子大队阅读 300评论 0 0
  • 技术支持联系方式:1571677826@qq.com 有什么意见可以通过应用内意见反馈或通过关于我们入口欢迎评价,...
    crazybigfish阅读 310评论 0 0
  • 【絮语】 因为喜爱,所以我想带你吃遍人间美食,在这里…来过,便不想离开! 【LIGHT FOOD】 远离快乐肥宅水...
    彬彬_42eb阅读 398评论 0 4
  • 写于2015年6月18日,可能已过时,请谨慎参考。所有示例代码未经完整测试,仅示意思路。 在javascript中...
    周骅阅读 270评论 0 0