首頁(yè) 猿問(wèn) ThreeJS：將邊緣幾何應(yīng)用到...

ThreeJS：將邊緣幾何應(yīng)用到 ArrowHelper

JavaScript

人到中年有點(diǎn)甜 2023-02-17 17:32:48

我正在嘗試在 ThreeJS 中使用 ArrowHelper 創(chuàng)建一個(gè)箭頭：let arrow = new THREE.ArrowHelper(direction.normalize(), new THREE.Vector3(), length, color, headLength, headWidth);我還想為邊緣使用單獨(dú)的顏色。我意識(shí)到我需要使用 THREE.EdgesGeometry，但我不太明白如何應(yīng)用它。有人能幫幫我嗎？更新抱歉混淆，我認(rèn)為箭頭使用金字塔，而不是圓錐體。有沒(méi)有辦法用金字塔代替錐體并為邊緣使用不同的顏色？更新謝謝大家的回答，他們真的很有幫助。我最終創(chuàng)建了自定義箭頭類(lèi)（從 ArrowHelper 復(fù)制了大部分代碼）：class CustomArrow extends THREE.Object3D { constructor( dir, origin, length, color, edgeColor, headLength, headWidth ) { super(); // dir is assumed to be normalized this.type = 'CustomArrow'; if ( dir === undefined ) dir = new THREE.Vector3( 0, 0, 1 ); if ( origin === undefined ) origin = new THREE.Vector3( 0, 0, 0 ); if ( length === undefined ) length = 1; if ( color === undefined ) color = 0xffff00; if ( headLength === undefined ) headLength = 0.2 * length; if ( headWidth === undefined ) headWidth = 0.2 * headLength; if ( this._lineGeometry === undefined ) { this._lineGeometry = new THREE.BufferGeometry(); this._lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 1, 0 ], 3 ) ); this._coneGeometry = new THREE.ConeBufferGeometry( 0.5, 1, 6); this._coneGeometry.translate( 0, - 0.5, 0 ); this._axis = new THREE.Vector3(); } this.position.copy( origin ); this.line = new THREE.Line( this._lineGeometry, new THREE.LineBasicMaterial( { color: color, toneMapped: false, linewidth: 4 } ) ); this.line.matrixAutoUpdate = false; this.add( this.line ) // base material this.cone = new THREE.Mesh( this._coneGeometry, new THREE.MeshBasicMaterial( { color: color, toneMapped: false } ) ); this.add(this.cone); }由于某種原因 linewidth 和 wireframeLinewidth 不影響線(xiàn)寬。知道為什么嗎？

查看完整描述

2 回答

jeck貓

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

編輯：金字塔是一個(gè)有 4 個(gè)徑向段的圓錐體，如果需要，請(qǐng)查看 arrowhelper 如何根據(jù)參數(shù)構(gòu)造它的圓錐體（帶有錐形 CylinderGeometry）和線(xiàn)，并將其替換為構(gòu)造如下的圓錐體幾何體：

原來(lái)的：

_coneGeometry = new CylinderBufferGeometry( 0, 0.5, 1, 5, 1 );

新的：

_coneGeometry = new ConeBufferGeometry( 0.5, 1, 4);

然后您不必使用 EdgesGeometry，而是使用線(xiàn)框材質(zhì)選項(xiàng)（根據(jù) @prisoner849 的評(píng)論）：

let wireframeMaterial = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});
let coneEdgeMesh = new THREE.Mesh(_coneGeometry, wireframeMaterial);

原答案：

THREE.ArrowHelper 由 2 個(gè) Object3D 組成：一個(gè) THREE.Line 用于直線(xiàn)，另一個(gè) THREE.Mesh 用于箭頭的圓錐體。Line 幾何圖形僅包含 2 個(gè)點(diǎn)并且沒(méi)有邊，因?yàn)樗且粭l線(xiàn)，但對(duì)于圓錐體，您可以使用：

let coneEdgeGeometry = new THREE.EdgesGeometry(arrow.cone.geometry);

然后你用你想要的邊幾何和顏色構(gòu)造一個(gè) LineSegments 對(duì)象：

let line = new THREE.LineSegments( coneEdgeGeometry, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
arrow.add(line);

如果錐體邊緣未顯示，請(qǐng)嘗試將 THREE.LineSegments 的 renderOrder 設(shè)置為 -1（這可能會(huì)產(chǎn)生其他問(wèn)題）

反對(duì) 回復(fù) 2023-02-17

翻過(guò)高山走不出你

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

您可以像這樣更改箭頭錐體的顏色：

body {

overflow: hidden;

margin: 0;

}

import * as THREE from "https://threejs.org/build/three.module.js";

import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight,

1, 100);

camera.position.set(0, 5, 10);

let renderer = new THREE.WebGLRenderer();

renderer.setSize(innerWidth, innerHeight);

document.body.appendChild(renderer.domElement);

new OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper());

// different colors

let ah = new THREE.ArrowHelper(

new THREE.Vector3(0, 1, 0),

new THREE.Vector3(-4, 0, 0),

5,

"magenta" /* default colour */);

ah.cone.material.color.set("red"); // change color of cone

scene.add(ah);

// colourful pyramid

let cg = new THREE.SphereBufferGeometry(0.5, 4, 2).toNonIndexed();

let pos = cg.attributes.position;

for (let i = 0; i < pos.count; i++){

if (pos.getY(i) < 0) pos.setY(i, 0);

}

console.log(cg);

let cls = [

new THREE.Color("red"),

new THREE.Color("green"),

new THREE.Color("blue"),

new THREE.Color("yellow")

]

let colors = [];

for(let i = 0; i < 2; i++){

cls.forEach( (c) => {

colors.push(c.r, c.g, c.b);

});

}

cg.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));

let cm = new THREE.MeshBasicMaterial({vertexColors: true});

let co = new THREE.Mesh(cg, cm);

co.scale.set(1, 5, 1);

scene.add(co);

renderer.setAnimationLoop(()=>{

renderer.render(scene, camera);

});

</script>

展開(kāi)片段

反對(duì) 回復(fù) 2023-02-17

2 回答
0 關(guān)注
240 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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

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

熱搜

最近搜索清空

ThreeJS：將邊緣幾何應(yīng)用到 ArrowHelper

ThreeJS：將邊緣幾何應(yīng)用到 ArrowHelper

2 回答

添加回答