ShaderMaterial Shading

by jmcjc5u

HTML

<div id="info">GLSL Shading</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.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">
    varying vec2 vUv;
    uniform sampler2D mytex;
    
    void main() {
        vec4 rgba = texture2D (mytex, vUv);
        if (rgba.a < 0.1)
        	discard;
        gl_FragColor = vec4 (rgba.rgb, 1.0);
    }
</script>

CSS

body {
    background-color: #fff;
    color: #111;
    margin: 0px;
    overflow: hidden;
    font-family: Monospace;
    font-size: 10px;
    position: absolute;
}
#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 5px;
    text-align: center;
    color: #ffff00
}

JavaScript

var scene, renderer, camera;

init();
animate();

function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
     antialias: true
  });
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);
  renderer.setClearColor(0x888888);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
  camera.position.y = 160;
  camera.position.z = 400;

  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  var loader = new THREE.TextureLoader();
  loader.setCrossOrigin('');
  let texture = loader.load ('https://i.imgur.com/HE7XPmB.png');
    
  let meshMaterial = new THREE.ShaderMaterial({
  		  side: THREE.DoubleSide,
        //transparent: true,
        uniforms: {
        lightpos: {type: 'v3', value: new THREE.Vector3()},
        mytex: {type: 't', value: texture}
        },
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent
  });

    let geometry = new THREE.PlaneGeometry (40, 40);
    let mesh = new THREE.Mesh(geometry, meshMaterial);
    scene.add(mesh);   
    mesh.position.y = 20;
}

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

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