Apply matcap material Bablyon.js

babylon multiScenes.md

https://playground.babylonjs.com/#MXCRPS#1
https://doc.babylonjs.com/features/featuresDeepDive/scene/multiScenes

Cam foucs with animation

https://playground.babylonjs.com/#Q8VH3H#28

react+babylon

https://zhuanlan.zhihu.com/p/476593787

babylon.js backlight.md

room https://playground.babylonjs.com/#EBARBA#15
https://www.nothing-is-3d.com/article27/from-blender-to-babylonjs#tocCredits

clay.js

//https://playground.babylonjs.com/#WGZLGJ#2786

const glbUrl = 'https://storage.googleapis.com/smplrspace-dev.appspot.com/playground-scene-no-light.glb'

const modifyChildren = ({ mesh, modifierFn, onRoot = false }) => {
  if (onRoot) {
    modifierFn(mesh)
  }
  mesh
    .getChildren()
    .forEach(mesh =>
      modifyChildren({ mesh, modifierFn, onRoot: true, child: true })
    )
}

const setMaterial = ({ mesh, material }) => {
  modifyChildren({
    mesh,
    modifierFn: mesh => {
      mesh.material = material
    },
    onRoot: true
  })
}

const addShadow = ({ mesh, shadowGenerator, child = false }) => {
  if (!child) {
    shadowGenerator.addShadowCaster(mesh)
  }
  modifyChildren({
    mesh,
    modifierFn: mesh => {
      mesh.receiveShadows = true
    },
    onRoot: true
  })
}

const delayCreateScene = () => {
    // scene
    var scene = new BABYLON.Scene(engine)

    // camera
    const camera = new BABYLON.ArcRotateCamera(
        'orbit-camera',
        -Math.PI / 2,
        Math.PI / 4,
        25,
        new BABYLON.Vector3(6, 0, -1.5),
        scene
    )
    camera.attachControl(true)

    // skybox
    const skyMaterial = new BABYLON.SkyMaterial('sky-material', scene)
    skyMaterial.backFaceCulling = false
    skyMaterial.luminance = 0.8
    skyMaterial.inclination = 0.18
    skyMaterial.azimuth = 0.27
    const skybox = BABYLON.BoxBuilder.CreateBox('skybox', { size: 1000 }, scene)
    skybox.material = skyMaterial

    // light for shadows
    const light = new BABYLON.DirectionalLight(
        'light',
        new BABYLON.Vector3(-1, -2, 1),
        scene
    )
    light.intensity = 1
    const lightDistance = 20
    light.position = new BABYLON.Vector3(lightDistance, 2 * lightDistance, lightDistance)

    // shadow generator
    const shadowGenerator = new BABYLON.ShadowGenerator(1024, light)
    shadowGenerator.useBlurCloseExponentialShadowMap = true
    shadowGenerator.bias = 0.001
    shadowGenerator.normalBias = 0.02
    shadowGenerator.setDarkness(0.5)
    light.shadowMinZ = 0
    light.shadowMaxZ = 80

    // clay material (hopefully)
    const clay = new BABYLON.PBRMetallicRoughnessMaterial('clay', scene)
    clay.baseColor = BABYLON.Color3.FromHexString('#edeae0')
    clay.emissiveColor = BABYLON.Color3.FromHexString('#a0a0a0')
    clay.metallic = 0
    clay.roughness = 0.64
    clay.alpha = 1
    

    // gltf model
    BABYLON.SceneLoader.Append(glbUrl, '', scene, scene => {
        const model = scene.rootNodes.find(n => n.name === '__root__')
        setMaterial({ mesh: model, material: clay })
        addShadow({ mesh: model, shadowGenerator })
    })

    return scene;
};

matcap_Bablyon.js

    var matCap = new BABYLON.StandardMaterial("", scene);
    matCap.disableLighting = true;
    var matCapTexture = new BABYLON.Texture("https://i.imgur.com/tQMdzOt.jpg", scene);
    matCapTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;
    matCap.reflectionTexture = matCapTexture;
    sphere.material = matCap;