Texture Map

r83 version

by Millieyan

HTML

<div id="info">Texture Mapping with TextureLoader
</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 type="x-shader/x-fragment" id="fragmentShaderDepth">
    uniform sampler2D texture;
    varying vec2 vUv;

    vec4 pack_depth(const in float depth) {
        const vec4 bit_shift = vec4(256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0);
        const vec4 bit_mask = vec4(0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0);
        vec4 res = fract(depth * bit_shift);
        res -= res.xxyz * bit_mask;
        return res;
    }

    void main() {
        vec4 pixel = texture2D(texture, vUv);
        if (pixel.a < 0.5) discard;
        gl_FragData[0] = pack_depth (gl_FragCoord.z);
    }
</script>
<script type="x-shader/x-vertex" id="vertexShaderDepth">
    varying vec2 vUv;

    void main() {
        vUV = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>

CSS

#info {
  position: absolute;
  top: 1%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffee12;
}

body {
  overflow: hidden;
}

JavaScript

var renderer, scene, camera;
var cube;
var angle = 0;

init();
animate();

function init() {
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  document.body.appendChild(renderer.domElement);

	scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 200;
  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  floor = new THREE.Mesh (new THREE.PlaneGeometry(300,300), new THREE.MeshPhongMaterial());
  floor.rotation.x = -Math.PI/2;
  floor.position.y = -55;
  scene.add (floor);
  
  /////////////////////////////////////////////////////////////////////
  let loader = new THREE.TextureLoader();
  loader.crossOrigin = '';
  texture = loader.load('https://i.imgur.com/J0RenHB.png');
	var texMat = new THREE.MeshBasicMaterial({
    map: texture,
    alphaTest: 0.5,
    side:THREE.DoubleSide
  });
   
  var hulk = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), texMat);
	scene.add(hulk);

  var uniforms = {
        texture: {
            type: "t",
            value: texture
        }
      };
  var vertexShader = document.getElementById('vertexShaderDepth').textContent;
  var fragmentShader = document.getElementById('fragmentShaderDepth').textContent;
  hulk.customDepthMaterial = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader
    });


  cube = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), new THREE.MeshPhongMaterial())
  scene.add(cube);
  cube.position.z = -120

	floor.receiveShadow = true;
  hulk.castShadow = true;
  cube.castShadow = true;
  cube.receiveShadow = true;
    cube.traverse (
   function (mesh) {
     if (mesh instanceof THREE.Mesh) {
       mesh.castShadow = true;
        mesh.receiveShadow =...