首頁猿問 ThreeJS：將邊緣幾何應用到...

ThreeJS：將邊緣幾何應用到 ArrowHelper

JavaScript

人到中年有點甜 2023-02-17 17:32:48

我正在嘗試在 ThreeJS 中使用 ArrowHelper 創建一個箭頭：let arrow = new THREE.ArrowHelper(direction.normalize(), new THREE.Vector3(), length, color, headLength, headWidth);我還想為邊緣使用單獨的顏色。我意識到我需要使用 THREE.EdgesGeometry，但我不太明白如何應用它。有人能幫幫我嗎？更新抱歉混淆，我認為箭頭使用金字塔，而不是圓錐體。有沒有辦法用金字塔代替錐體并為邊緣使用不同的顏色？更新謝謝大家的回答，他們真的很有幫助。我最終創建了自定義箭頭類（從 ArrowHelper 復制了大部分代碼）：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 不影響線寬。知道為什么嗎？

查看完整描述

2 回答

jeck貓

TA貢獻1909條經驗獲得超7個贊

編輯：金字塔是一個有 4 個徑向段的圓錐體，如果需要，請查看 arrowhelper 如何根據參數構造它的圓錐體（帶有錐形 CylinderGeometry）和線，并將其替換為構造如下的圓錐體幾何體：

原來的：

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

新的：

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

然后您不必使用 EdgesGeometry，而是使用線框材質選項（根據 @prisoner849 的評論）：

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

原答案：

THREE.ArrowHelper 由 2 個 Object3D 組成：一個 THREE.Line 用于直線，另一個 THREE.Mesh 用于箭頭的圓錐體。Line 幾何圖形僅包含 2 個點并且沒有邊，因為它是一條線，但對于圓錐體，您可以使用：

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

然后你用你想要的邊幾何和顏色構造一個 LineSegments 對象：

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

如果錐體邊緣未顯示，請嘗試將 THREE.LineSegments 的 renderOrder 設置為 -1（這可能會產生其他問題）

反對回復 2023-02-17

翻過高山走不出你

TA貢獻1875條經驗獲得超3個贊

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

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),

"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>

展開片段

反對回復 2023-02-17

2 回答
0 關注
227 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

ThreeJS：將邊緣幾何應用到 ArrowHelper

ThreeJS：將邊緣幾何應用到 ArrowHelper

2 回答

添加回答