WebGL의 어드벤트 캘린더 8일째입니다.

Three.js를 사용하여 깃발을 두드리는 애니메이션을 만드는 방법을 설명합니다. 물리적으로 올바른 움직임이라기보다는 PlaneGeometry와 Sin파를 사용해 간단한 코드로 그것 같은 것을 목표로 합니다. 이전 이 PC 사이트 에서 사용하고 있던 것입니다.

하는 방법

먼저 PlaneGeometry의 Mesh를 준비합니다.

plane_junbi

//hoge.jpgをテクスチャにしたSEGX,SEGYに分割されたPlaneを作る。
var texture = THREE.ImageUtils.loadTexture('hoge.jpg');
var geometry = new THREE.PlaneGeometry(1300, 1228, SEGX, SEGY);
var material = new THREE.MeshLambertMaterial({map:texture});
plane = new THREE.Mesh(geometry, material);
scene.add(plane); 

이 Plane의 vertices를 매 프레임을 sin파로 움직입니다. z 방향만 물결을 맞춥니다.

plane_ugokasu

plane.geometry.verticesNeedUpdate=true;//これを忘れずに書く
for (var i=0;i<SEGX+1;i++) {
    for (var j=0;j<SEGY+1;j++) {
        //(i,j)のvertexを得る
        var index = j * (SEGX + 1) + i % (SEGX + 1);
        var vertex = plane.geometry.vertices[index];
        //時間経過と頂点の位置によって波を作る
        var amp=100;//振幅
        vertex.z = amp * Math.sin( -i/2 + time*15 );
    }           
}

포인트는 geometry.verticesNeedUpdate=true 로 하는 것과 Plane 의 각 Vertix 의 참조의 방법입니다.
amp=100이나 i/2,time*15의 수치는 적당하게 변경해 보세요.

이런 느낌으로 할 수 있었습니다. 세세한 코드는 이쪽을 참조해 주세요. iOS8라든지에서도 움직입니다.

Perlin 노이즈도 사용해보기

Sin 파만이라면, 조금 지루한 움직임이므로 perlin 노이즈 htps : // 기주 b. 코 m / 조세 phg / 이세 js 로 변화를 붙여 봅니다. perlin 노이즈는 연속적이고 부드러운 난수를 얻습니다.

방금 sin파의 진폭 amp=100으로 하고 있던 부분에, perlin 노이즈도 더해, 이하와 같이 변경했습니다.

perlin_kuwaeru

//perlin.jsを使用
var amp = 50 + 300 * noise.perlin3(i/20+time/5,j/70,time);
vertex.z = amp * Math.sin( -i/2 + time*15 );

perlin 노이즈 noise.perlin3(x,y,z)는 잘 모르겠지만 x,y,z를 조금 바꾸면 반환값도 조금 바뀌는 것 같은 이미지입니다.

결과, 이런 느낌이 되었습니다. sin만의 것보다 변화가 붙었습니다.

결론

이상, 의사적으로 깃발 같은 것을 만들었습니다. 원래 z 밖에 바꾸지 않기 때문에, 물리적으로 이상하고, 천이 뻗어 있는 것입니다만, 그것처럼 보이는 생각도 있습니다.
실제로 내가 사용했을 때는 반죽이 녹지 않는 처리를 넣기도 했고, 파라미터를 바꾸는 것만으로도 더 나아지거나 할지도 모릅니다.

내일은 @Rinforzando_960 님입니다. 감사합니다!