1
Da ich nicht die THREE.Line Breite größer als 1 machen kann, fragte ich mich, ob es Alternativen gibt, um ähnliche visuelle Wirkung zu erzielen ??highlight THREE.Line in three.js
Ich überlegte, mehrere Linien nebeneinander zu zeichnen. Aber da es die Anzahl der Scheitelpunkte in allen meinen Linien erhöhen würde, würde ich als letzte Option belassen.
Die andere Option, die mir in den Sinn kam, war eine Art glühender Effekt. Aber ich bin mir nicht sicher, wie man das auf THREE.Line macht.
Was ist der beste Weg, um einen leuchtenden Effekt für THREE.LINE zu erzielen?
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<header>
\t <style>
\t \t body canvas{
\t \t \t width: 100%,
\t \t \t height: 100%;
\t \t \t margin:0;
\t \t \t padding:0;
\t \t }
\t </style>
</header>
<body>
</body>
<script>
var renderer, camera, scene, controls;
function initRenderer(){
\t renderer = new THREE.WebGLRenderer({antialias:true});
\t renderer.setSize(window.innerWidth, window.innerHeight);
\t document.body.appendChild(renderer.domElement);
\t renderer.setClearColor(0x264d73, 1);
}
function initScene(){
\t scene = new THREE.Scene();
}
function initCamera(){
\t camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
\t camera.position.set(0, 50, 0);
\t camera.lookAt(scene.position);
\t scene.add(camera);
}
function initLights(){
\t var aLight = new THREE.AmbientLight(0xD0D0D0, 0.5);
\t scene.add(aLight);
}
////// Initializers ////////////////////////
function add_path(){
\t path = new THREE.CatmullRomCurve3([
\t \t new THREE.Vector3(3.4000015258789062, 0, 3.4000015258789062),
\t \t new THREE.Vector3(10.600006103515625, 0, 3.4000015258789062),
\t \t new THREE.Vector3(10.600006103515625, 0, 10.600006103515625),
\t \t new THREE.Vector3(3.4000015258789062, 0, 10.600006103515625)
\t ]);
\t path.closed = true;
\t path.type = "catmullrom";
\t path.tension = 0.1;
\t
\t var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
\t var geometry = new THREE.Geometry();
var splinePoints = path.getPoints(20);
\t for (var i = 0; i < splinePoints.length; i++) {
geometry.vertices.push(splinePoints[i]);
}
\t var line = new THREE.Line(geometry, material);
scene.add(line);
\t camera.lookAt(line.position);
\t camera.position.x += 7;
\t camera.position.y -= 30;
\t camera.position.z += 5;
}
///// Mouse events ////////
///// Main /////////
function main(){
\t initRenderer(window.innerWidth, window.innerHeight);
\t initScene();
\t initCamera(window.innerWidth, window.innerHeight);
\t initLights();
\t add_path();
\t animate();
}
function animate(){
\t window.requestAnimationFrame(animate);
\t render_all();
}
function render_all(){
\t renderer.render(scene, camera);
}
main();
</script>
Was denken Sie über das Rendern von Linien zur Textur und das Erweitern in einem anderen Render-Durchlauf? – mlkn
gut nie versucht, dass eine, nicht sicher, ob das wäre die beste Option IMO, wie ich diesen leuchtenden Effekt für die Hervorhebung bestimmter Bereiche in einem hexagonalen Gitter verwenden möchte. – Alexus