第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

用three.js動(dòng)態(tài)畫線

用three.js動(dòng)態(tài)畫線

這就是我想要實(shí)現(xiàn)的（一個(gè)可修改的多邊形，其中紅色圓圈是頂點(diǎn)），我想動(dòng)態(tài)地構(gòu)建多邊形。初始化幾何體時(shí)var geometry = new THREE.Geometry();geometry.vertices.push(point);geometry.vertices.push(point);var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));它在第二次單擊之前一直工作良好，它會(huì)在1和2之間建立一條直線，但是在將其推入數(shù)組時(shí)不會(huì)添加第三條線。WebGL似乎需要緩沖點(diǎn)。當(dāng)我預(yù)先定義這樣的頂點(diǎn)時(shí)，我可以畫兩條線（第三次單擊）var geometry = new THREE.Geometry();for (var i = 0; i < 4; i++) {    geometry.vertices.push(point);}var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));但這不是一個(gè)好的解決方案，因?yàn)槲也恢烙脩粝胍砑佣嗌賯€(gè)頂點(diǎn)，并且給它分配一個(gè)大數(shù)字是沒有意義的，因?yàn)槲冶仨毝啻窝h(huán)它。有什么辦法解決嗎？
查看完整描述

3 回答

?
HUWWW

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊

您可以輕松地使用BufferGeometry和setDrawRange()方法為線設(shè)置動(dòng)畫（或增加渲染點(diǎn)的數(shù)量）。但是，您確實(shí)需要設(shè)置最大點(diǎn)數(shù)。


var MAX_POINTS = 500;


// geometry

var geometry = new THREE.BufferGeometry();


// attributes

var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point

geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );


// draw range

drawCount = 2; // draw the first 2 points, only

geometry.setDrawRange( 0, drawCount );


// material

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


// line

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

scene.add( line );

您可以使用以下模式設(shè)置位置數(shù)據(jù)：


var positions = line.geometry.attributes.position.array;


var x = y = z = index = 0;


for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {


    positions[ index ++ ] = x;

    positions[ index ++ ] = y;

    positions[ index ++ ] = z;


    x += ( Math.random() - 0.5 ) * 30;

    y += ( Math.random() - 0.5 ) * 30;

    z += ( Math.random() - 0.5 ) * 30;


}

如果要更改在第一次渲染后渲染的點(diǎn)數(shù)，請(qǐng)執(zhí)行以下操作：


line.geometry.setDrawRange( 0, newValue );

如果要在第一次渲染后更改位置數(shù)據(jù)值，請(qǐng)按以下方式設(shè)置needsUpdate標(biāo)志：


line.geometry.attributes.position.needsUpdate = true; // required after the first render

這是一個(gè)小提琴，顯示了可以適應(yīng)您的用例的動(dòng)畫線。


查看完整回答
反對(duì) 回復(fù) 2019-09-24
?
四季花海

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊

實(shí)時(shí)畫線

這里是一個(gè)更新的小提琴，我在其中優(yōu)化了 user3325025他的示例中的代碼；在這種情況下，絕對(duì)不需要在渲染時(shí)更新直線的所有點(diǎn)。僅需要onMouseMove更新（更新行尾）和onMouseDown（繪制新點(diǎn)）：


// update line

function updateLine() {

  positions[count * 3 - 3] = mouse.x;

  positions[count * 3 - 2] = mouse.y;

  positions[count * 3 - 1] = mouse.z;

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

}


// mouse move handler

function onMouseMove(event) {

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  mouse.z = 0;

  mouse.unproject(camera);

  if( count !== 0 ){

    updateLine();

  }

}


// add point

function addPoint(event){

  positions[count * 3 + 0] = mouse.x;

  positions[count * 3 + 1] = mouse.y;

  positions[count * 3 + 2] = mouse.z;

  count++;

  line.geometry.setDrawRange(0, count);

  updateLine();

}


查看完整回答
反對(duì) 回復(fù) 2019-09-24
  • 3 回答
  • 0 關(guān)注
  • 4508 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)