在 Three.js 中，如何为形状提供自定义边缘颜色?(不只是设置线框:真）

In Three.js, how can I give my shapes custom edge colors? ( not just setting wireframe:true )

本文关键字：颜色 设置 线框 边缘 自定义 js Three      更新时间：2023-09-26

我正在制作一个 3D 条形图，我希望我的条形具有自定义颜色的边缘。有人有什么想法吗？我的形状是这样创建的

var threeWidth = 400,
  threeHeight = 300;
var viewAngle = 45,
  aspect = threeWidth / threeHeight,
  near = 0.1,
  far = 10000;
var $chart = $('#chart');
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(viewAngle, aspect, near, far);
var scene = new THREE.Scene();
scene.add(camera);
renderer.setSize(threeWidth, threeHeight);
$chart.append(renderer.domElement);
var geometry = new THREE.BoxGeometry( 10, 100, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0xCC0000} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

从 r81 开始，EdgesHelper已被弃用，取而代之的是：

// edges geometry
var geometry = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry
var material = new THREE.LineBasicMaterial( { color: 0xffff00, linewidth: 2 } );
var edges = new THREE.LineSegments( geometry, material );
mesh.add( edges ); // add wireframe as a child of the parent mesh

在 Github 上查看问题

这很旧，但我只是偶然发现了这个......

var edges = new THREE.EdgesHelper( cube, 0x0000ff);
edges.material.linewidth = 2;
scene.add(edges);

这里有一个帮助我的小提琴。
EdgesHelper 文档在这里。

相关文章：