JSFiddle - React, Tailwind, and code Playground

by Marty Dillon

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">
    
    attribute float opacity;
    
    varying float opa;
    
    void main() {
    
        opa = opacity;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    
    }
    
</script>

<script type="x-shader/x-fragment" id="fragmentshader">
    
    varying float opa;
    
    void main() {
    
        gl_FragColor = vec4( 1.0, 0.0, 0.0, opa);
    
    }
    
</script>

JavaScript

var scene, camera, renderer, controls, raycaster, attributes, sphereMesh, lastface;

init();
animate();

function init()
{
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 
    camera.position.z = 200;
    
    renderer = new THREE.WebGLRenderer();
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    
    var light = new THREE.DirectionalLight(0xffffff);
	light.position.set(100,100,400);
	scene.add(light);

    var sphereGeo = new THREE.SphereGeometry( 60, 16, 16 );
    attributes = {
		opacity: {	type: 'f', value: [] }
	};
    var customMat = new THREE.ShaderMaterial({
        transparent: true,
        attributes:     attributes,
        vertexShader:   document.getElementById( 'vertexshader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentshader' ).textContent
    });
    var vertices = sphereGeo.vertices;
    var opacityValues = attributes.opacity.value;
    for ( var v = 0; v < vertices.length; v++ ) {
        opacityValues[ v ] = 1.0;
    }
    lastface = sphereGeo.faces[0];
    sphereMesh = new THREE.Mesh( sphereGeo, customMat );
	sphereMesh.position.set(0,10,0);
	scene.add(sphereMesh);
    
    var boxGeo = new THREE.BoxGeometry(50,50,50);
    var boxMesh = new THREE.Mesh( boxGeo );
    boxMesh.position.y = 10;
    scene.add(boxMesh);
    
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    raycaster = new THREE.Raycaster();
    
    renderer.domElement.addEventListener('mousemove', onMouseMove, false);
}

function animate() 
{            
    requestAnimationFrame( animate );
	update();
    render();
};

function update()
{
    controls.update();
}
    
function render()
{
    renderer.render(scene, camera);
}

function onMouseMove(event) {
    
    event.preventDefault();
    
    var vector = new THREE.Vector3();
    var dir = new THREE.Vector3();
    
   ...