首頁 > ThreeJs教程 > Three.js畫線
此章節介紹:

    Three.js畫線

    假設你將要畫一個圓或者畫一條線,而不是一個線框模型,或者說不是一個Mesh(網格)。 第一步我們要做的,是設置好renderer(渲染器)、scene(場景)和camera(相機)-(如果對這里所提到的東西,還不了解,請閱讀本手冊第一章“創建一個場景”)。

    這是我們將要用到的代碼:

    const?renderer?=?new?THREE.WebGLRenderer();
    renderer.setSize(?window.innerWidth,?window.innerHeight?);
    document.body.appendChild(?renderer.domElement?);
    const?camera?=?new?THREE.PerspectiveCamera(?45,?window.innerWidth?/?window.innerHeight,?1,?500?);
    camera.position.set(?0,?0,?100?);
    camera.lookAt(?0,?0,?0?);
    const?scene?=?new?THREE.Scene();

    接下來我們要做的事情是定義一個材質。對于線條來說,我們能使用的材質只有LineBasicMaterial 或者 LineDashedMaterial。

    //create?a?blue?LineBasicMaterial
    const?material?=?new?THREE.LineBasicMaterial(?{?color:?0x0000ff?}?);

    定義好材質之后,我們需要一個帶有一些頂點的geometry(幾何體)。

    const?points?=?[];
    points.push(?new?THREE.Vector3(?-?10,?0,?0?)?);
    points.push(?new?THREE.Vector3(?0,?10,?0?)?);
    points.push(?new?THREE.Vector3(?10,?0,?0?)?);
    
    const?geometry?=?new?THREE.BufferGeometry().setFromPoints(?points?);

    注意,線是畫在每一對連續的頂點之間的,而不是在第一個頂點和最后一個頂點之間繪制線條(線條并未閉合)。

    既然我們已經有了能夠畫兩條線的點和一個材質,那我們現在就可以將他們組合在一起,形成一條線。

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

    剩下的事情就是把它添加到場景中,并調用render(渲染)函數。

    scene.add(?line?);
    renderer.render(?scene,?camera?);

    你現在應當已經看到了一個由兩條藍線組成的、指向上的箭頭。


    日本一卡2卡3卡四卡精品网站,欧美一卡2卡3卡4卡国色天香在线,精品一卡二卡≡卡四卡精品,欧美一卡2卡3卡4卡国色天香在线,小小视频在线观看