1
Поскольку я не могу сделать ширину THREE.Line больше 1, мне было интересно, есть ли альтернативы для достижения подобного визуального эффекта?выделить THREE.Line в three.js
Я рассматривал возможность рисования нескольких линий, расположенных рядом друг с другом. Но поскольку это увеличило бы количество вершин во всех моих строках, я бы оставил это как последний вариант.
Другой вариант, который пришел мне на ум, использовал какой-то светящийся эффект. Но я не уверен, как это сделать на THREE.Line.
Каков наилучший способ добиться сияющего эффекта для THREE.LINE?
<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>
Что вы думаете об рендеринге линий к текстуре и расширении их в другом рендеринге? – mlkn
хорошо никогда не пробовал этот, не уверен, что это будет лучший вариант ИМО, поскольку я хотел бы использовать этот светящийся эффект для выделения определенных областей в гексагональной сетке. – Alexus