How do I make my edge lines thicker?

Questions
,
1

Hey all, I’ve made a very low poly sphere and have made the edges black, but I would like them to be thicker.

How do I do this? I’m quite new to Three.js

import * as THREE from 'three';
import './style.css'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {EdgesGeometry, LineSegments, ShaderMaterial} from 'three';


//Scene
const scene = new THREE.Scene()



//Sphere
const geometry = new THREE.SphereGeometry(250, 16, 10)

const material = new THREE.MeshStandardMaterial({
  color: '#ffffff'
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)


//Lines

const edges = new THREE.EdgesGeometry(geometry);
const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 1 });
const lines = new THREE.LineSegments(edges, edgesMaterial);
scene.add(lines);




//Sizes
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight,
}

//Light
const light = new THREE.AmbientLight(0xffffff, 1, 100)
light.position.set(0, 10, 10)
scene.add(light)

//Camera
//const camera = new THREE.PerspectiveCamera(45, sizes.width/sizes.height, 0.1, 100)
const camera = new THREE.OrthographicCamera( sizes.width / - 2, sizes.width / 2, sizes.height / 2, sizes.height / - 2, -250, 1000 );
//camera.zoom = 3;
//camera.position.z = 10
camera.position.set(0, 0, 10);
camera.lookAt(new THREE.Vector3(0, 0, 0));

scene.add(camera)

//Render
const canvas = document.querySelector('.webgl');
//console.log(canvas);
const renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(2)
//renderer.setClearColor(0x87CEFA);
//renderer.render(scene, camera)


//Controls
const controls = new OrbitControls(camera,canvas)
controls.enableDamping = true
controls.enablePan = false
controls.enableZoom = false

//Resize
window.addEventListener('resize', () => {
  //Update Sizes
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight
  //Update Camera
  camera.left = sizes.width / - 2;
  camera.right = sizes.width / 2;
  camera.top = sizes.height / 2;
  camera.bottom = sizes.height / - 2;

  camera.updateProjectionMatrix()
  //camera.aspect = sizes.width / sizes.height
  renderer.setSize(sizes.width, sizes.height)
})

const loop = () => {
  controls.update()
  renderer.render(scene,camera);
  renderer.setClearColor(0x87CEFA);
  window.requestAnimationFrame(loop)
}
loop()

Many thanks :slight_smile:

2

See from the Collection of examples from discourse.threejs.org

FatLineEdges

2022 eXtended eXamples SimplifyFatLines - @author jrlazz

RenderEdgesShader
ArrowLinesFat