THREE.JS (半透明シェーダー)

import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { TransparentShader } from './TransparentShader.js';

．．．省略．．．

  const geometry = new THREE.BoxGeometry( 10, 10, 10 );

  const shader = TransparentShader;
  const backuniforms = THREE.UniformsUtils.clone( shader.uniforms );
  const tex = new THREE.TextureLoader().load( '../../../img/maggi.png' );
  const backmaterial = new THREE.ShaderMaterial( {
    uniforms: backuniforms,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.BackSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.AddEquation,
    blendDst: THREE.OneMinusSrcAlphaFactor
  } );
  backmaterial.uniforms[ 'Threshold' ].value = 0.1;
  backmaterial.uniforms[ 'Fill' ].value = true;
  backmaterial.uniforms[ 'Color' ].value = new THREE.Vector4(0.2, 0.6, 0.6, 1.0);
  backmaterial.uniforms[ 'Sampler' ].value = tex;
  backmaterial.uniforms[ 'Opacity' ].value = 0.5;
  backmaterial.uniforms[ 'uDirLightPos' ].value = dlight.position;
  backmaterial.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  backmaterial.uniforms[ 'uDirLightIntensity' ].value = 2.0;
  backmaterial.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);

  const backuniforms2 = THREE.UniformsUtils.clone( shader.uniforms );
  const backmaterial2 = new THREE.ShaderMaterial( {
    uniforms: backuniforms2,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.BackSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.AddEquation,
    blendDst: THREE.SrcAlphaFactor
  } );
  backmaterial2.uniforms[ 'Threshold' ].value = 0.0;
  backmaterial2.uniforms[ 'Fill' ].value = true;
  backmaterial2.uniforms[ 'Color' ].value = new THREE.Vector4(0.3, 0.5, 0.1, 0.5);
  backmaterial2.uniforms[ 'Sampler' ].value = null;
  backmaterial2.uniforms[ 'Opacity' ].value = 0.5;
  backmaterial2.uniforms[ 'uDirLightPos' ].value = dlight.position;
  backmaterial2.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  backmaterial2.uniforms[ 'uDirLightIntensity' ].value = 2.0;
  backmaterial2.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);

  const frontuniforms = THREE.UniformsUtils.clone( shader.uniforms );
  const frontmaterial = new THREE.ShaderMaterial( {
    uniforms: frontuniforms,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.FrontSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.AddEquation,
    blendDst: THREE.OneMinusSrcAlphaFactor
  } );
  frontmaterial.uniforms[ 'Threshold' ].value = 0.1;
  frontmaterial.uniforms[ 'Fill' ].value = false;
  frontmaterial.uniforms[ 'Color' ].value = new THREE.Vector4(0.5, 0.5, 0.5, 1.0);
  frontmaterial.uniforms[ 'Sampler' ].value = tex;
  frontmaterial.uniforms[ 'Opacity' ].value = 0.5;
  frontmaterial.uniforms[ 'uDirLightPos' ].value = dlight.position;
  frontmaterial.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  frontmaterial.uniforms[ 'uDirLightIntensity' ].value = 2.0;
  frontmaterial.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);


  const frontuniforms2 = THREE.UniformsUtils.clone( shader.uniforms );
  const frontmaterial2 = new THREE.ShaderMaterial( {
    uniforms: frontuniforms2,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    side: THREE.FrontSide,
    transparent: true,
    opacity: 0.5,
    blending: THREE.CustomBlending,
    blendSrc: THREE.SrcAlphaFactor,
    blendSrcAlpha: 0.5,
    blendEquation: THREE.AddEquation,
    blendDst: THREE.SrcAlphaFactor
  } );
  frontmaterial2.uniforms[ 'Threshold' ].value = 0.0;
  frontmaterial2.uniforms[ 'Fill' ].value = true;
  frontmaterial2.uniforms[ 'Color' ].value = new THREE.Vector4(0.1, 0.3, 0.5, 1.0);
  frontmaterial2.uniforms[ 'Sampler' ].value = null;
  frontmaterial2.uniforms[ 'Opacity' ].value = 0.5;
  frontmaterial2.uniforms[ 'uDirLightPos' ].value = dlight.position;
  frontmaterial2.uniforms[ 'uDirLightColor' ].value = new THREE.Vector4(dlight.color.r, dlight.color.g, dlight.color.b, 1.0);
  frontmaterial2.uniforms[ 'uDirLightIntensity' ].value = 2.0;
  frontmaterial2.uniforms[ 'uAmbientLightColor' ].value = new THREE.Vector4(alight.color.r, alight.color.g, alight.color.b, 1.0);

  let i;
  for(i = 0; i ＜ 9; i++) {
    meshB = new THREE.Mesh( geometry, backmaterial );
    meshB.position.set(((i % 3) - 1) * 50, 0, Math.floor(i / 3) * 50);
    meshB.renderOrder = 1;
    meshF = new THREE.Mesh( geometry, frontmaterial );
    meshF.position.set(((i % 3) - 1) * 50, 0, Math.floor(i / 3) * 50);
    meshF.renderOrder = 2;

    scene.add( meshB );
    scene.add( meshF );

    boxies.push( meshB );
    boxies.push( meshF );
  }
  for(i = 0; i ＜ 9; i++) {
    meshB2 = new THREE.Mesh( geometry, backmaterial2 );
    meshB2.position.set(((i % 3) - 1) * 50, -25, Math.floor(i / 3) * 50);
    meshB2.renderOrder = 1;
    meshF2 = new THREE.Mesh( geometry, frontmaterial2 );
    meshF2.position.set(((i % 3) - 1) * 50, -25, Math.floor(i / 3) * 50);
    meshF2.renderOrder = 2;

    scene.add( meshB2 );
    scene.add( meshF2 );

    boxies2.push( meshB2 );
    boxies2.push( meshF2 );
  }

．．．省略．．．