在 three.js 中突出显示 THREE.Line答案

【问题标题】：highlight THREE.Line in three.js在 three.js 中突出显示 THREE.Line
【发布时间】：2016-08-05 19:06:25
【问题描述】：

由于我无法使THREE.Line 的宽度大于1，我想知道是否有任何替代方法可以达到类似的视觉效果？？

我正在考虑画几条并排放置的线。但是因为它会增加我所有线条中的顶点数量，所以我会把它作为最后的选择。

我想到的另一个选项是使用某种发光效果。但我不确定如何在 THREE.Line 上执行此操作。

为 THREE.LINE 实现发光效果的最佳方法是什么？

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>

<header>
	<style>
		body canvas{
			width: 100%,
			height: 100%;
			margin:0;
			padding:0;
		}
	</style>
</header>

<body>
</body>

<script>
var renderer, camera, scene, controls;


function initRenderer(){
	renderer = new THREE.WebGLRenderer({antialias:true});
	renderer.setSize( window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	renderer.setClearColor(0x264d73, 1);
}

function initScene(){
	scene = new THREE.Scene();
}

function initCamera(){
	camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
	camera.position.set( 0, 50, 0 );
	camera.lookAt(scene.position);
	scene.add(camera);
}

function initLights(){
	var aLight = new THREE.AmbientLight(0xD0D0D0, 0.5);
	scene.add(aLight);
}

////// Initializers ////////////////////////

function add_path(){
	path = new THREE.CatmullRomCurve3( [
		new THREE.Vector3( 3.4000015258789062, 0, 3.4000015258789062 ),
		new THREE.Vector3( 10.600006103515625, 0, 3.4000015258789062 ),
		new THREE.Vector3( 10.600006103515625, 0, 10.600006103515625 ),
		new THREE.Vector3( 3.4000015258789062, 0, 10.600006103515625 )
	]);

	path.closed = true;
  	path.type = "catmullrom";
	path.tension = 0.1;
	
	var material = new THREE.LineBasicMaterial({
        color: 0xff00f0,
    });
	var geometry = new THREE.Geometry();
    var splinePoints = path.getPoints(20);
	for (var i = 0; i < splinePoints.length; i++) {
        geometry.vertices.push(splinePoints[i]);
    }
	var line = new THREE.Line(geometry, material);
    scene.add(line);
	camera.lookAt(line.position);
	camera.position.x += 7;
	camera.position.y -= 30;
	camera.position.z += 5;
}

///// Mouse events ////////

///// Main /////////
function main(){
	initRenderer(window.innerWidth, window.innerHeight );
	initScene();
	initCamera(window.innerWidth, window.innerHeight );
	initLights();
	add_path();
	animate();
}

function animate(){
	window.requestAnimationFrame( animate );
	render_all();
}

function render_all(){
	renderer.render(scene, camera);
}

main();
</script>

【问题讨论】：

您如何看待将线条渲染到纹理并在另一个渲染过程中加宽它们？
好吧，从来没有尝试过，不确定这是否是 IMO 的最佳选择，因为我想使用这种发光效果来突出显示六边形网格中的某些区域。

标签： javascript html three.js

【解决方案1】：

我在这个问题上苦苦挣扎了很久，我发现在最后突出一行的最简洁和最佳（从 GPU 和代码的意义上来说）的解决方案是改变它的颜色。

【讨论】：