<!DOCTYPE html>
<html lang="en">

     <head>
          <title>three.js webgl - interactive - voxel painter</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
          <style>
               body
               {
                    background:#777;
                    padding:0;
                    margin:0;
                    font-weight: bold;
                    overflow:hidden;
               }

               #info
               {
                    position: absolute;
                    top: 0px;
                    width: 100%;
                    padding: 5px;
                    font-family:Monospace;
                    font-size:13px;
                    text-align:center;
               }

               a
               {
                    color: #ff0000;
               }
          </style>
     </head>

     <body>

          <div id="info">
               <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - voxel painter - webgl<br>
               <strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel
          </div>

          <!-- connect the library three.js -->
          <script src="https://dir.by/example_lib/tree_js/three.js"></script>

          <!-- additional libraries -->
          <script src="https://dir.by/example_lib/tree_js/WebGL.js"></script>

          <script>

               if ( WEBGL.isWebGLAvailable() === false ) {

                    document.body.appendChild( WEBGL.getWebGLErrorMessage() );

               }

               var camera, scene, renderer;
               var plane, cube;
               var mouse, raycaster, isShiftDown = false;

               var rollOverMesh, rollOverMaterial;
               var cubeGeo, cubeMaterial;

               var objects = [];

               init();
               render();

               function init()
               {
                    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
                    camera.position.set( 500, 800, 1300 );
                    camera.lookAt( 0, 0, 0 );

                    scene = new THREE.Scene();
                    scene.background = new THREE.Color( 0xf0f0f0 );

                    // roll-over helpers
                    var rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
                    rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
                    rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
                    scene.add( rollOverMesh );

                    // cubes
                    cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
                    cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( 'https://dir.by/developer/three_js/example_paint_3d_cubes/textures/square-outline-textured.png' ) } );

                    // grid
                    var gridHelper = new THREE.GridHelper( 1000, 20 );
                    scene.add( gridHelper );

                    //
                    raycaster = new THREE.Raycaster();
                    mouse = new THREE.Vector2();

                    var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
                    geometry.rotateX( - Math.PI / 2 );

                    plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
                    scene.add( plane );

                    objects.push( plane );

                    // lights
                    var ambientLight = new THREE.AmbientLight( 0x606060 );
                    scene.add( ambientLight );

                    var directionalLight = new THREE.DirectionalLight( 0xffffff );
                    directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
                    scene.add( directionalLight );

                    renderer = new THREE.WebGLRenderer( { antialias: true } );
                    renderer.setPixelRatio( window.devicePixelRatio );
                    renderer.setSize( window.innerWidth, window.innerHeight );
                    document.body.appendChild( renderer.domElement );

                    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                    document.addEventListener( 'keydown', onDocumentKeyDown, false );
                    document.addEventListener( 'keyup', onDocumentKeyUp, false );

                    window.addEventListener( 'resize', onWindowResize, false );
               }

               function onWindowResize()
               {
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();

                    renderer.setSize( window.innerWidth, window.innerHeight );
               }

               function onDocumentMouseMove( event )
               {
                    event.preventDefault();

                    mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );

                    raycaster.setFromCamera( mouse, camera );

                    var intersects = raycaster.intersectObjects( objects );

                    if ( intersects.length > 0 )
                    {
                         var intersect = intersects[ 0 ];

                         rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
                         rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );

                    }

                    render();
               }

               function onDocumentMouseDown( event )
               {
                    event.preventDefault();

                    mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );

                    raycaster.setFromCamera( mouse, camera );

                    var intersects = raycaster.intersectObjects( objects );

                    if ( intersects.length > 0 )
                    {
                         var intersect = intersects[ 0 ];

                         // delete cube

                         if ( isShiftDown )
                         {
                              if ( intersect.object !== plane )
                              {
                                   scene.remove( intersect.object );

                                   objects.splice( objects.indexOf( intersect.object ), 1 );
                              }
                         }
                         else
                         {
                              // create cube
                              var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
                              voxel.position.copy( intersect.point ).add( intersect.face.normal );
                              voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
                              scene.add( voxel );

                              objects.push( voxel );
                         }

                         render();
                    }
               }

               function onDocumentKeyDown( event )
               {
                    switch( event.keyCode )
                    {
                         case 16: isShiftDown = true; break;
                    }
               }

               function onDocumentKeyUp( event )
               {
                    switch ( event.keyCode )
                    {
                         case 16: isShiftDown = false; break;
                    }
               }

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

          </script>
     </body>

</html>