Question

由于我无法使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>

Answer 1

我在这个问题上挣扎了很长时间，我发现最清晰，最优化（在GPU和代码意义上）的解决方案，最终突出了一条线就是改变它的颜色。

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

1 个答案: