JSFiddle - React, Tailwind, and code Playground

by wayne6172

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

<script id="myVertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
	void main() {
		gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);
		vUv = uv;
	}
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
    uniform sampler2D texture;
	varying vec2 vUv;
	uniform vec2 center[MAX_SIZE];
	uniform float gran;
    
	
    float max_p(float x,float y){
    	return x > y ? x : y;
    }
    
	void main() {
		vec4 color;
		
        color = texture2D (texture, vUv);
        float dis;
        float opcitiy = 0.;
        
        
        for(int i = 0; i < MAX_SIZE; i++){
            dis = distance (gl_FragCoord.st, center[i]);
            if (dis < 5.) 
            	opcitiy = max_p(opcitiy, 1.);
            else if(dis < 100.)
            	opcitiy = max_p(opcitiy, 1.0 - (dis - 5.) / 95.);
        }
        
		gl_FragColor = color * opcitiy;
	}
</script>

CSS

body {
    overflow: hidden;
    margin: 0;
}

JavaScript

var renderer, scene, camera, keyboard = new KeyboardState();
var car, walls = [],
    wallSize = 10,
    mainCamera, HUDScene, HUDCamera;
var cameraHelper;
var rtTexture, rttmaterial;
var center = new THREE.Vector2();
var rot = 0.0;
var nowPos = [];
var pos = 0;

init();
animate();

function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(100, 100, 100);
    camera.lookAt(new THREE.Vector3());

    scene.add(new THREE.GridHelper(500, 50, 'red', 'white'));
    scene.add(new THREE.Mesh(new THREE.BoxGeometry(50, 50, 50), new THREE.MeshNormalMaterial()));

    HUDScene = new THREE.Scene();
    HUDCamera = new THREE.OrthographicCamera(-150, 150, 150, -150, -10, 10);

    rtTexture = new THREE.WebGLRenderTarget(
        window.innerWidth, window.innerHeight, {
            minFilter: THREE.LinearFilter,
            magFilter: THREE.NearestFilter,
            format: THREE.RGBFormat
        }
    );

	nowPos = new Array(40);
    for(let i = 0; i < 40; i++)
    	nowPos[i] = new THREE.Vector2();

    rttmaterial = new THREE.ShaderMaterial({
        uniforms: {
            gran: {
                type: "f",
                value: 100
            },
            texture: {
                type: "t",
                value: rtTexture
            },
            center: {
                type: "v2",
                value: nowPos
            }
        },
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: '#define MAX_SIZE 40\n' + document.getElementById('myFragmentShader').textContent
    });
    var plane = new THREE.PlaneBufferGeometry(300, 300); // width, height
    quad = new THREE.Mesh(plane, rttmaterial);
   ...