three.js/manual/resources/threejs-materials.js

import * as THREE from 'three';
import {threejsLessonUtils} from './threejs-lesson-utils.js';

{
  function makeSphere(widthDivisions, heightDivisions) {
    const radius = 7;
    return new THREE.SphereGeometry(radius, widthDivisions, heightDivisions);
  }

  const highPolySphereGeometry = function() {
    const widthDivisions = 100;
    const heightDivisions = 50;
    return makeSphere(widthDivisions, heightDivisions);
  }();

  const lowPolySphereGeometry = function() {
    const widthDivisions = 12;
    const heightDivisions = 9;
    return makeSphere(widthDivisions, heightDivisions);
  }();

  function smoothOrFlat(flatShading, radius = 7) {
    const widthDivisions = 12;
    const heightDivisions = 9;
    const geometry = new THREE.SphereGeometry(radius, widthDivisions, heightDivisions);
    const material = new THREE.MeshPhongMaterial({
      flatShading,
      color: 'hsl(300,50%,50%)',
    });
    return new THREE.Mesh(geometry, material);
  }

  function basicLambertPhongExample(MaterialCtor, lowPoly, params = {}) {
    const geometry = lowPoly ? lowPolySphereGeometry : highPolySphereGeometry;
    const material = new MaterialCtor({
      color: 'hsl(210,50%,50%)',
      ...params,
    });
    return {
      obj3D: new THREE.Mesh(geometry, material),
      trackball: lowPoly,
    };
  }

  function sideExample(side) {
    const base = new THREE.Object3D();
    const size = 6;
    const geometry = new THREE.PlaneGeometry(size, size);
    [
      { position: [ -1, 0, 0], up: [0,  1, 0], },
      { position: [  1, 0, 0], up: [0, -1, 0], },
      { position: [ 0, -1, 0], up: [0, 0, -1], },
      { position: [ 0,  1, 0], up: [0, 0,  1], },
      { position: [ 0, 0, -1], up: [ 1, 0, 0], },
      { position: [ 0, 0,  1], up: [-1, 0, 0], },
    ].forEach((settings, ndx) => {
      const material = new THREE.MeshBasicMaterial({side});
      material.color.setHSL(ndx / 6, .5, .5);
      const mesh = new THREE.Mesh(geometry, material);
      mesh.up.set(...settings.up);
      mesh.lookAt(...settings.position);
      mesh.position.set(...settings.position).multiplyScalar(size * .75);
      base.add(mesh);
    });
    return base;
  }

  function makeStandardPhysicalMaterialGrid(elem, physical, update) {
    const numMetal = 5;
    const numRough = 7;
    const meshes = [];
    const MatCtor = physical ? THREE.MeshPhysicalMaterial : THREE.MeshStandardMaterial;
    const color = physical ? 'hsl(160,50%,50%)' : 'hsl(140,50%,50%)';
    for (let m = 0; m < numMetal; ++m) {
      const row = [];
      for (let r = 0; r < numRough; ++r) {
        const material = new MatCtor({
          color,
          roughness: r / (numRough - 1),
          metalness: 1 - m / (numMetal - 1),
        });
        const mesh = new THREE.Mesh(highPolySphereGeometry, material);
        row.push(mesh);
      }
      meshes.push(row);
    }
    return {
      obj3D: null,
      trackball: false,
      render(renderInfo) {
        const {camera, scene, renderer} = renderInfo;
        const rect = elem.getBoundingClientRect();

        const width = (rect.right - rect.left) * renderInfo.pixelRatio;
        const height = (rect.bottom - rect.top) * renderInfo.pixelRatio;
        const left = rect.left * renderInfo.pixelRatio;
        const bottom = (renderer.domElement.clientHeight - rect.bottom) * renderInfo.pixelRatio;

        const cellSize = Math.min(width / numRough, height / numMetal) | 0;
        const xOff = (width - cellSize * numRough) / 2;
        const yOff = (height - cellSize * numMetal) / 2;

        camera.aspect = 1;
        camera.updateProjectionMatrix();

        if (update) {
          update(meshes);
        }

        for (let m = 0; m < numMetal; ++m) {
          for (let r = 0; r < numRough; ++r) {
            const x = left + xOff + r * cellSize;
            const y = bottom + yOff + m * cellSize;
            renderer.setViewport(x, y, cellSize, cellSize);
            renderer.setScissor(x, y, cellSize, cellSize);
            const mesh = meshes[m][r];
            scene.add(mesh);
            renderer.render(scene, camera);
            scene.remove(mesh);
          }
        }
      },
    };
  }

  threejsLessonUtils.addDiagrams({
    smoothShading: {
      create() {
        return smoothOrFlat(false);
      },
    },
    flatShading: {
      create() {
        return smoothOrFlat(true);
      },
    },
    MeshBasicMaterial: {
      create() {
        return basicLambertPhongExample(THREE.MeshBasicMaterial);
      },
    },
    MeshLambertMaterial: {
      create() {
        return basicLambertPhongExample(THREE.MeshLambertMaterial);
      },
    },
    MeshPhongMaterial: {
      create() {
        return basicLambertPhongExample(THREE.MeshPhongMaterial);
      },
    },
    MeshBasicMaterialLowPoly: {
      create() {
        return basicLambertPhongExample(THREE.MeshBasicMaterial, true);
      },
    },
    MeshLambertMaterialLowPoly: {
      create() {
        return basicLambertPhongExample(THREE.MeshLambertMaterial, true);
      },
    },
    MeshPhongMaterialLowPoly: {
      create() {
        return basicLambertPhongExample(THREE.MeshPhongMaterial, true);
      },
    },
    MeshPhongMaterialShininess0: {
      create() {
        return basicLambertPhongExample(THREE.MeshPhongMaterial, false, {
          color: 'red',
          shininess: 0,
        });
      },
    },
    MeshPhongMaterialShininess30: {
      create() {
        return basicLambertPhongExample(THREE.MeshPhongMaterial, false, {
          color: 'red',
          shininess: 30,
        });
      },
    },
    MeshPhongMaterialShininess150: {
      create() {
        return basicLambertPhongExample(THREE.MeshPhongMaterial, false, {
          color: 'red',
          shininess: 150,
        });
      },
    },
    MeshBasicMaterialCompare: {
      create() {
        return basicLambertPhongExample(THREE.MeshBasicMaterial, false, {
          color: 'purple',
        });
      },
    },
    MeshLambertMaterialCompare: {
      create() {
        return basicLambertPhongExample(THREE.MeshLambertMaterial, false, {
          color: 'black',
          emissive: 'purple',
        });
      },
    },
    MeshPhongMaterialCompare: {
      create() {
        return basicLambertPhongExample(THREE.MeshPhongMaterial, false, {
          color: 'black',
          emissive: 'purple',
          shininess: 0,
        });
      },
    },
    MeshToonMaterial: {
      create() {
        return basicLambertPhongExample(THREE.MeshToonMaterial);
      },
    },
    MeshStandardMaterial: {
      create(props) {
        return makeStandardPhysicalMaterialGrid(props.renderInfo.elem, false);
      },
    },
    MeshPhysicalMaterial: {
      create(props) {
        const settings = {
          clearcoat: .5,
          clearcoatRoughness: 0,
        };

        function addElem(parent, type, style = {}) {
          const elem = document.createElement(type);
          Object.assign(elem.style, style);
          parent.appendChild(elem);
          return elem;
        }

        function addRange(elem, obj, prop, min, max) {
          const outer = addElem(elem, 'div', {
            width: '100%',
            textAlign: 'center',
            'font-family': 'monospace',
          });

          const div = addElem(outer, 'div', {
            textAlign: 'left',
            display: 'inline-block',
          });

          const label = addElem(div, 'label', {
            display: 'inline-block',
            width: '12em',
          });
          label.textContent = prop;

          const num = addElem(div, 'div', {
            display: 'inline-block',
            width: '3em',
          });

          function updateNum() {
            num.textContent = obj[prop].toFixed(2);
          }
          updateNum();

          const input = addElem(div, 'input', {
          });
          Object.assign(input, {
            type: 'range',
            min: 0,
            max: 100,
            value: (obj[prop] - min) / (max - min) * 100,
          });
          input.addEventListener('input', () => {
            obj[prop] = min + (max - min) * input.value / 100;
            updateNum();
          });
        }

        const {elem} = props.renderInfo;
        addRange(elem, settings, 'clearcoat', 0, 1);
        addRange(elem, settings, 'clearcoatRoughness', 0, 1);
        const area = addElem(elem, 'div', {
          width: '100%',
          height: '400px',
        });

        return makeStandardPhysicalMaterialGrid(area, true, (meshes) => {
          meshes.forEach(row => row.forEach(mesh => {
            mesh.material.clearcoat = settings.clearcoat;
            mesh.material.clearcoatRoughness = settings.clearcoatRoughness;
          }));
        });
      },
    },
    MeshDepthMaterial: {
      create(props) {
        const {camera} = props;
        const radius = 4;
        const tube = 1.5;
        const radialSegments = 8;
        const tubularSegments = 64;
        const p = 2;
        const q = 3;
        const geometry = new THREE.TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q);
        const material = new THREE.MeshDepthMaterial();
        camera.near = 7;
        camera.far = 20;
        return new THREE.Mesh(geometry, material);
      },
    },
    MeshNormalMaterial: {
      create() {
        const radius = 4;
        const tube = 1.5;
        const radialSegments = 8;
        const tubularSegments = 64;
        const p = 2;
        const q = 3;
        const geometry = new THREE.TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q);
        const material = new THREE.MeshNormalMaterial();
        return new THREE.Mesh(geometry, material);
      },
    },
    sideDefault: {
      create() {
        return sideExample(THREE.FrontSide);
      },
    },
    sideDouble: {
      create() {
        return sideExample(THREE.DoubleSide);
      },
    },
  });
}