How to add Glow/Bloom effect to wire mesh

Question

Currently I have this code. It's creating a glowing box but I want the lines/ edges of the box/ wire frame to glow. I'd like to get Bloom working if possible. How can I accomplish this? thanks

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Glowing Wireframe Cube</title>
<style>
  body { margin: 0; overflow: hidden; background: black;}
</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
  // create the scene
  var scene = new THREE.Scene();

  // create the camera
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 0, 5);

  // create the renderer
  var renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // create the cube
  var width = 3, height = 3, depth = 3;
  var geometry = new THREE.BoxGeometry(width, height, depth);

  // create wireframe material
  var wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0xDD4124, wireframe: true });

  // create glowing material
  var glowMaterial = new THREE.MeshBasicMaterial({ color: 0xDD4124, transparent: true, opacity: 0.5 });

  // create cube with wireframe
  var cube = new THREE.Mesh(geometry, wireframeMaterial);
  scene.add(cube);

  // create cube for glow effect
  var glowCube = new THREE.Mesh(geometry, glowMaterial);
  glowCube.scale.multiplyScalar(1); // slightly larger than the wireframe cube
  scene.add(glowCube);

  // render the scene with camera
  renderer.render(scene, camera);
</script>
</body>
</html>

I have bloompass, convolutionshader, copyshader, edgesgeomertry, effectcomposer, renderpass, shaderlib, shaderpass, three.min, uniformsutils, & unrealbloompass saved in the same directory as the index.html. I have tried to use different combinations of these w/ the correct paths but I've only been able to create a black screen.

How to add Glow/Bloom effect to wire mesh

0 Answers0