作ったもの

アイディアを考え中 🤔💡#webgl #threejs pic.twitter.com/o3sWjJXNkj
— yukidoke (@snowdoke) March 7, 2018

一筆書きlineのリンク

初めに

Three.js Advent Calendar 2019の10日目の記事です。

今回、ご紹介するのはSVGをJSONに変換して、一筆書きのlineを作ろうというものです。

少し古くなってしまうのですが、
three.js r92
blender 2.79
を使用しています。

まず、blenderでSVGをインポートします。
ファイル > インポート > .svg

その際、インポートしたSVGはカーブになっていますので、SVGを選択した状態でAlt + Cを押して、メッシュに変換してください。

次は、インポートしたSVGをJSONにエクスポートします。
ファイル > エクスポート > .json
デフォルトでは、JSONのエクスポートはないため、アドオンを追加する必要があり、こちらの記事が参考になります。

3Dデータ(Blender)をThree.jsで表示するまでの方法

JSONをエクスポートする際のオプションですが今回は頂点情報のみを使用するので、
Geometry
タイプ: geometry
index Buffer: なし
エクスポートするもの頂点にのみチェックを入れる、でやっています。

コード

頂点座標を配列に追加する関数を書きます。

function addVertexBuffer(geometry, index, x, y, z){
    var index = index*3;
    var array = geometry.attributes.position.array;
    array[index]   = x;
    array[index+1] = y;
    array[index+2] = z;
};

描くlineの設定を書きます。

function drawDynamicLine(){
    var geometry = new THREE.BufferGeometry();

    // JSONの読み込み
    var request = new XMLHttpRequest();
    request.open("GET", "think.json", false);
    request.send(null);
    var json_l = JSON.parse(request.responseText);

    var positions = new Float32Array(maxpoints * 3);
    geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));

    var material = new THREE.LineBasicMaterial({color: 0xffd700});

    var line = new THREE.Line(geometry, material);

    var points = new Float32Array(json_l["vertices"]);

    for(var i=0; i<maxpoints; i++){
        var x = points[i*3+0];
        var y = points[i*3+1];
        var z = points[i*3+2];
        addVertexBuffer(line.geometry, i, x, y, z);
    }
    line.position.z = 0.3;
    scene.add(line);
}

繰り返す関数を書きます。

function animate() {
    line.geometry.setDrawRange( 0, drawCount );

    if(drawCount > maxpoints) drawCount = maxpoints;
    drawCount += 2;

    line.geometry.attributes.position.needsUpdate = true;

    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

Sceneなどを設定します。

function setup() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);

    var ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    drawDynamicLine();
}

setup();
animate();

最後に

個人の感想ですが、lineが時間の経過とともに描かれていくのは、とても面白いです。
僕が作ったものでは、lineがZ軸上は移動していないので、Z軸も移動させるとまた違うものができてくると思います。

three.jsで一筆書きのlineを作る

作ったもの

初めに

コード

最後に