JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/TransformControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/OBJLoader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/Detector.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/shaders/CopyShader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/shaders/CopyShader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/OutlinePass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/shaders/FXAAShader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/libs/stats.min.js"></script>
<script src='https://rawgit.com/mrdoob/three.js/dev/examples/js/libs/dat.gui.min.js'></script>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - Outline Pass by <a href="http://eduperiment.com" target="_blank">Prashant Sharma</a> and <a href="https://clara.io" target="_blank">Ben Houston</a><br/><br/>
</div>
</body>
CSS
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
}
a {
color:#00ff78;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
display:block;
}
.dg.ac {
z-index: 1 !important; /* FIX DAT.GUI */
}
JavaScript
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, controls;
var mesh, decal;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var selectedObjects = [];
var composer, effectFXAA, outlinePass;
var obj3d = new THREE.Object3D();
var group = new THREE.Object3D();
var params = {
edgeStrength: 3.0,
edgeGlow: 0.0,
edgeThickness: 1.0,
pulsePeriod: 0,
rotate: false,
usePatternTexture: false
};
// Init gui
var gui = new dat.GUI();
gui.add(params, "edgeStrength", 0.01, 10).onChange(function( value ) {
outlinePass.edgeStrength = Number(value);
});
gui.add(params, "edgeGlow", 0.0, 1).onChange(function( value ) {
outlinePass.edgeGlow = Number(value);
});
gui.add(params, "edgeThickness", 1, 4).onChange(function( value ) {
outlinePass.edgeThickness = Number(value);
});
gui.add(params, "pulsePeriod", 0.0, 5).onChange(function( value ) {
outlinePass.pulsePeriod = Number(value);
});
gui.add(params, "rotate");
gui.add(params, "usePatternTexture").onChange(function( value ) {
outlinePass.usePatternTexture = value;
});
var Configuration = function() {
this.visibleEdgeColor = "#ffffff";
this.hiddenEdgeColor = "#ff6699";
};
var conf = new Configuration();
var controladorVisible = gui.addColor( conf, 'visibleEdgeColor');
var controladorHidden = gui.addColor( conf, 'hiddenEdgeColor');
controladorVisible.onChange(function( colorValue ) {
//the return value by the chooser is like as: #ffff
colorValue = colorValue.replace('#', '');
function hexToRgb( hex ) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[ 1 ], 16),
g: parseInt(result[ 2 ], 16),
b: parseInt(result[ 3 ], 16)
} : null;
}
var rgba = hexToRgb(colorValue);
var color =...