JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/r112/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/r112/examples/js/controls/OrbitControls.js"></script>
JavaScript
const {
Mesh,
DirectionalLight,
Group,
BoxBufferGeometry,
SphereBufferGeometry,
MeshStandardMaterial,
MeshBasicMaterial,
FrontSide,
BackSide,
IncrementWrapStencilOp,
DecrementWrapStencilOp,
KeepStencilOp,
NotEqualStencilFunc,
ReplaceStencilOp,
CustomBlending,
OrbitControls
} = THREE;
// draws a red highlight on the surface of geometry
class HighlightMesh extends Group {
constructor(geometry) {
super();
const mat1 = new MeshBasicMaterial();
mat1.depthWrite = false;
mat1.colorWrite = false;
mat1.side = FrontSide;
mat1.stencilWrite = true;
mat1.stencilZFail = IncrementWrapStencilOp;
mat1.stencilZPass = IncrementWrapStencilOp;
const mat2 = mat1.clone();
mat2.side = BackSide;
mat2.stencilZFail = DecrementWrapStencilOp;
mat2.stencilZPass = DecrementWrapStencilOp;
const mat3 = mat1.clone();
mat3.side = FrontSide;
mat3.stencilZFail = KeepStencilOp;
mat3.stencilZPass = DecrementWrapStencilOp;
const mat4 = mat1.clone();
mat4.side = BackSide;
mat4.stencilZFail = KeepStencilOp;
mat4.stencilZPass = IncrementWrapStencilOp;
const mat5 = new MeshBasicMaterial();
mat5.depthWrite = false;
mat5.depthTest = false;
mat5.stencilWrite = true;
mat5.stencilFunc = NotEqualStencilFunc;
mat5.stencilRef = 0;
mat5.stencilFail = ReplaceStencilOp;
mat5.stencilZFail = ReplaceStencilOp;
mat5.stencilZPass = ReplaceStencilOp;
mat5.color.set(0xff0000);
mat5.opacity = 0.25;
mat5.blending = CustomBlending;
mat5.side = BackSide;
const pass1 = new Mesh(geometry, mat1);
pass1.renderOrder = 1;
const pass2 = new Mesh(geometry, mat2);
pass2.renderOrder = 2;
const pass3 = new Mesh(geometry, mat3);
pass3.renderOrder = 3;
const pass4 = new Mesh(geometry, mat4);
pass4.renderOrder = 4;
const pass5 = new Mesh(geometry, mat5);
pass5.renderOrder = 5;
...