lines/fatlines.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
    <script>
        (function(f, a, t, h, o, m){
            a[h]=a[h]||function(){
                (a[h].q=a[h].q||[]).push(arguments)
            };
            o=f.createElement('script'),
                m=f.getElementsByTagName('script')[0];
            o.async=1; o.src=t; o.id='fathom-script';
            m.parentNode.insertBefore(o,m)
        })(document, window, '//stats.josh.earth/tracker.js', 'fathom');
        fathom('set', 'siteId', 'GISNV');
        fathom('trackPageview');
    </script>
    <!-- / Fathom -->
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            padding:0;
            margin:0;
        }
    </style>
    <script src="./node_modules/three/build/three.min.js"></script>
    <script src="./node_modules/three/examples/js/lines/LineSegmentsGeometry.js"></script>
    <script src="./node_modules/three/examples/js/lines/LineGeometry.js"></script>
    <script src="./node_modules/three/examples/js/lines/WireframeGeometry2.js"></script>
    <script src="./node_modules/three/examples/js/lines/LineMaterial.js"></script>
    <script src="./node_modules/three/examples/js/lines/LineSegments2.js"></script>
    <script src="./node_modules/three/examples/js/lines/Wireframe.js"></script>
</head>
<body>

<script type="module">
    let scene, camera, renderer
    let mesh
    let matLine

    function setupScene() {
        var geo = new THREE.SphereGeometry( 2 );
        var geometry = new THREE.WireframeGeometry2( geo );
        matLine = new THREE.LineMaterial( {
            color: 0xff0000,
            linewidth: 5, // in pixels
        } );
        matLine.resolution.set( window.innerWidth, window.innerHeight );
        mesh = new THREE.Wireframe( geometry, matLine );
        mesh.position.z = -10
        scene.add( mesh );
    }

    function init() {
        //setup canvas
        const container = document.createElement( 'div' );
        document.body.appendChild( container );
        //setup scene and cameras
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0x000000 );
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 );
        //setup light
        var light = new THREE.DirectionalLight( 0xffffff, 1.0 );
        light.position.set( 0, -1, 1 ).normalize();
        scene.add( light );

        //setup renderer
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );
        //setup events
        window.addEventListener( 'resize', ()=>{
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        },false);


        setupScene()
    }

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

    init();
    renderer.setAnimationLoop( render );

</script>

</body>
</html>