Make shadow with only LightProbe

niao · October 15, 2020, 12:33am

Here is one good sample from https://threejs.org/examples/#webgl_lightprobe
I want to make a shadow for Shpere model to disable DirectionalLight and envMap by setting value as 0.
Even disable DirectionalLight and envMap, Sphere seems to show by light effect(maybe that is LightProbe).
So, I want only using LightProbe can generate a shadow of Sphere.
But I have no idea.
Here are some my code:

<html lang="en">
<head>
    <title>three.js webgl - light probe</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
    <style type="text/css">.dg ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        clear: both
    }

    .dg.ac {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        z-index: 0
    }

    .dg:not(.ac) .main {
        overflow: hidden
    }

    .dg.main {
        -webkit-transition: opacity .1s linear;
        -o-transition: opacity .1s linear;
        -moz-transition: opacity .1s linear;
        transition: opacity .1s linear
    }

    .dg.main.taller-than-window {
        overflow-y: auto
    }

    .dg.main.taller-than-window .close-button {
        opacity: 1;
        margin-top: -1px;
        border-top: 1px solid #2c2c2c
    }

    .dg.main ul.closed .close-button {
        opacity: 1 !important
    }

    .dg.main:hover .close-button, .dg.main .close-button.drag {
        opacity: 1
    }

    .dg.main .close-button {
        -webkit-transition: opacity .1s linear;
        -o-transition: opacity .1s linear;
        -moz-transition: opacity .1s linear;
        transition: opacity .1s linear;
        border: 0;
        line-height: 19px;
        height: 20px;
        cursor: pointer;
        text-align: center;
        background-color: #000
    }

    .dg.main .close-button.close-top {
        position: relative
    }

    .dg.main .close-button.close-bottom {
        position: absolute
    }

    .dg.main .close-button:hover {
        background-color: #111
    }

    .dg.a {
        float: right;
        margin-right: 15px;
        overflow-y: visible
    }

    .dg.a.has-save > ul.close-top {
        margin-top: 0
    }

    .dg.a.has-save > ul.close-bottom {
        margin-top: 27px
    }

    .dg.a.has-save > ul.closed {
        margin-top: 0
    }

    .dg.a .save-row {
        top: 0;
        z-index: 1002
    }

    .dg.a .save-row.close-top {
        position: relative
    }

    .dg.a .save-row.close-bottom {
        position: fixed
    }

    .dg li {
        -webkit-transition: height .1s ease-out;
        -o-transition: height .1s ease-out;
        -moz-transition: height .1s ease-out;
        transition: height .1s ease-out;
        -webkit-transition: overflow .1s linear;
        -o-transition: overflow .1s linear;
        -moz-transition: overflow .1s linear;
        transition: overflow .1s linear
    }

    .dg li:not(.folder) {
        cursor: auto;
        height: 27px;
        line-height: 27px;
        padding: 0 4px 0 5px
    }

    .dg li.folder {
        padding: 0;
        border-left: 4px solid rgba(0, 0, 0, 0)
    }

    .dg li.title {
        cursor: pointer;
        margin-left: -4px
    }

    .dg .closed li:not(.title), .dg .closed ul li, .dg .closed ul li > * {
        height: 0;
        overflow: hidden;
        border: 0
    }

    .dg .cr {
        clear: both;
        padding-left: 3px;
        height: 27px;
        overflow: hidden
    }

    .dg .property-name {
        cursor: default;
        float: left;
        clear: left;
        width: 40%;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .dg .c {
        float: left;
        width: 60%;
        position: relative
    }

    .dg .c input[type=text] {
        border: 0;
        margin-top: 4px;
        padding: 3px;
        width: 100%;
        float: right
    }

    .dg .has-slider input[type=text] {
        width: 30%;
        margin-left: 0
    }

    .dg .slider {
        float: left;
        width: 66%;
        margin-left: -5px;
        margin-right: 0;
        height: 19px;
        margin-top: 4px
    }

    .dg .slider-fg {
        height: 100%
    }

    .dg .c input[type=checkbox] {
        margin-top: 7px
    }

    .dg .c select {
        margin-top: 5px
    }

    .dg .cr.function, .dg .cr.function .property-name, .dg .cr.function *, .dg .cr.boolean, .dg .cr.boolean * {
        cursor: pointer
    }

    .dg .cr.color {
        overflow: visible
    }

    .dg .selector {
        display: none;
        position: absolute;
        margin-left: -9px;
        margin-top: 23px;
        z-index: 10
    }

    .dg .c:hover .selector, .dg .selector.drag {
        display: block
    }

    .dg li.save-row {
        padding: 0
    }

    .dg li.save-row .button {
        display: inline-block;
        padding: 0px 6px
    }

    .dg.dialogue {
        background-color: #222;
        width: 460px;
        padding: 15px;
        font-size: 13px;
        line-height: 15px
    }

    #dg-new-constructor {
        padding: 10px;
        color: #222;
        font-family: Monaco, monospace;
        font-size: 10px;
        border: 0;
        resize: none;
        box-shadow: inset 1px 1px 1px #888;
        word-wrap: break-word;
        margin: 12px 0;
        display: block;
        width: 440px;
        overflow-y: scroll;
        height: 100px;
        position: relative
    }

    #dg-local-explain {
        display: none;
        font-size: 11px;
        line-height: 17px;
        border-radius: 3px;
        background-color: #333;
        padding: 8px;
        margin-top: 10px
    }

    #dg-local-explain code {
        font-size: 10px
    }

    #dat-gui-save-locally {
        display: none
    }

    .dg {
        color: #eee;
        font: 11px 'Lucida Grande', sans-serif;
        text-shadow: 0 -1px 0 #111
    }

    .dg.main::-webkit-scrollbar {
        width: 5px;
        background: #1a1a1a
    }

    .dg.main::-webkit-scrollbar-corner {
        height: 0;
        display: none
    }

    .dg.main::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #676767
    }

    .dg li:not(.folder) {
        background: #1a1a1a;
        border-bottom: 1px solid #2c2c2c
    }

    .dg li.save-row {
        line-height: 25px;
        background: #dad5cb;
        border: 0
    }

    .dg li.save-row select {
        margin-left: 5px;
        width: 108px
    }

    .dg li.save-row .button {
        margin-left: 5px;
        margin-top: 1px;
        border-radius: 2px;
        font-size: 9px;
        line-height: 7px;
        padding: 4px 4px 5px 4px;
        background: #c5bdad;
        color: #fff;
        text-shadow: 0 1px 0 #b0a58f;
        box-shadow: 0 -1px 0 #b0a58f;
        cursor: pointer
    }

    .dg li.save-row .button.gears {
        background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
        height: 7px;
        width: 8px
    }

    .dg li.save-row .button:hover {
        background-color: #bab19e;
        box-shadow: 0 -1px 0 #b0a58f
    }

    .dg li.folder {
        border-bottom: 0
    }

    .dg li.title {
        padding-left: 16px;
        background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2)
    }

    .dg .closed li.title {
        background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)
    }

    .dg .cr.boolean {
        border-left: 3px solid #806787
    }

    .dg .cr.color {
        border-left: 3px solid
    }

    .dg .cr.function {
        border-left: 3px solid #e61d5f
    }

    .dg .cr.number {
        border-left: 3px solid #2FA1D6
    }

    .dg .cr.number input[type=text] {
        color: #2FA1D6
    }

    .dg .cr.string {
        border-left: 3px solid #1ed36f
    }

    .dg .cr.string input[type=text] {
        color: #1ed36f
    }

    .dg .cr.function:hover, .dg .cr.boolean:hover {
        background: #111
    }

    .dg .c input[type=text] {
        background: #303030;
        outline: none
    }

    .dg .c input[type=text]:hover {
        background: #3c3c3c
    }

    .dg .c input[type=text]:focus {
        background: #494949;
        color: #fff
    }

    .dg .c .slider {
        background: #303030;
        cursor: ew-resize
    }

    .dg .c .slider-fg {
        background: #2FA1D6;
        max-width: 100%
    }

    .dg .c .slider:hover {
        background: #3c3c3c
    }

    .dg .c .slider:hover .slider-fg {
        background: #44abda
    }
    </style>
    <style type="text/css">.dg ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        clear: both
    }

    .dg.ac {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        z-index: 0
    }

    .dg:not(.ac) .main {
        overflow: hidden
    }

    .dg.main {
        -webkit-transition: opacity .1s linear;
        -o-transition: opacity .1s linear;
        -moz-transition: opacity .1s linear;
        transition: opacity .1s linear
    }

    .dg.main.taller-than-window {
        overflow-y: auto
    }

    .dg.main.taller-than-window .close-button {
        opacity: 1;
        margin-top: -1px;
        border-top: 1px solid #2c2c2c
    }

    .dg.main ul.closed .close-button {
        opacity: 1 !important
    }

    .dg.main:hover .close-button, .dg.main .close-button.drag {
        opacity: 1
    }

    .dg.main .close-button {
        -webkit-transition: opacity .1s linear;
        -o-transition: opacity .1s linear;
        -moz-transition: opacity .1s linear;
        transition: opacity .1s linear;
        border: 0;
        line-height: 19px;
        height: 20px;
        cursor: pointer;
        text-align: center;
        background-color: #000
    }

    .dg.main .close-button.close-top {
        position: relative
    }

    .dg.main .close-button.close-bottom {
        position: absolute
    }

    .dg.main .close-button:hover {
        background-color: #111
    }

    .dg.a {
        float: right;
        margin-right: 15px;
        overflow-y: visible
    }

    .dg.a.has-save > ul.close-top {
        margin-top: 0
    }

    .dg.a.has-save > ul.close-bottom {
        margin-top: 27px
    }

    .dg.a.has-save > ul.closed {
        margin-top: 0
    }

    .dg.a .save-row {
        top: 0;
        z-index: 1002
    }

    .dg.a .save-row.close-top {
        position: relative
    }

    .dg.a .save-row.close-bottom {
        position: fixed
    }

    .dg li {
        -webkit-transition: height .1s ease-out;
        -o-transition: height .1s ease-out;
        -moz-transition: height .1s ease-out;
        transition: height .1s ease-out;
        -webkit-transition: overflow .1s linear;
        -o-transition: overflow .1s linear;
        -moz-transition: overflow .1s linear;
        transition: overflow .1s linear
    }

    .dg li:not(.folder) {
        cursor: auto;
        height: 27px;
        line-height: 27px;
        padding: 0 4px 0 5px
    }

    .dg li.folder {
        padding: 0;
        border-left: 4px solid rgba(0, 0, 0, 0)
    }

    .dg li.title {
        cursor: pointer;
        margin-left: -4px
    }

    .dg .closed li:not(.title), .dg .closed ul li, .dg .closed ul li > * {
        height: 0;
        overflow: hidden;
        border: 0
    }

    .dg .cr {
        clear: both;
        padding-left: 3px;
        height: 27px;
        overflow: hidden
    }

    .dg .property-name {
        cursor: default;
        float: left;
        clear: left;
        width: 40%;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .dg .c {
        float: left;
        width: 60%;
        position: relative
    }

    .dg .c input[type=text] {
        border: 0;
        margin-top: 4px;
        padding: 3px;
        width: 100%;
        float: right
    }

    .dg .has-slider input[type=text] {
        width: 30%;
        margin-left: 0
    }

    .dg .slider {
        float: left;
        width: 66%;
        margin-left: -5px;
        margin-right: 0;
        height: 19px;
        margin-top: 4px
    }

    .dg .slider-fg {
        height: 100%
    }

    .dg .c input[type=checkbox] {
        margin-top: 7px
    }

    .dg .c select {
        margin-top: 5px
    }

    .dg .cr.function, .dg .cr.function .property-name, .dg .cr.function *, .dg .cr.boolean, .dg .cr.boolean * {
        cursor: pointer
    }

    .dg .cr.color {
        overflow: visible
    }

    .dg .selector {
        display: none;
        position: absolute;
        margin-left: -9px;
        margin-top: 23px;
        z-index: 10
    }

    .dg .c:hover .selector, .dg .selector.drag {
        display: block
    }

    .dg li.save-row {
        padding: 0
    }

    .dg li.save-row .button {
        display: inline-block;
        padding: 0px 6px
    }

    .dg.dialogue {
        background-color: #222;
        width: 460px;
        padding: 15px;
        font-size: 13px;
        line-height: 15px
    }

    #dg-new-constructor {
        padding: 10px;
        color: #222;
        font-family: Monaco, monospace;
        font-size: 10px;
        border: 0;
        resize: none;
        box-shadow: inset 1px 1px 1px #888;
        word-wrap: break-word;
        margin: 12px 0;
        display: block;
        width: 440px;
        overflow-y: scroll;
        height: 100px;
        position: relative
    }

    #dg-local-explain {
        display: none;
        font-size: 11px;
        line-height: 17px;
        border-radius: 3px;
        background-color: #333;
        padding: 8px;
        margin-top: 10px
    }

    #dg-local-explain code {
        font-size: 10px
    }

    #dat-gui-save-locally {
        display: none
    }

    .dg {
        color: #eee;
        font: 11px 'Lucida Grande', sans-serif;
        text-shadow: 0 -1px 0 #111
    }

    .dg.main::-webkit-scrollbar {
        width: 5px;
        background: #1a1a1a
    }

    .dg.main::-webkit-scrollbar-corner {
        height: 0;
        display: none
    }

    .dg.main::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #676767
    }

    .dg li:not(.folder) {
        background: #1a1a1a;
        border-bottom: 1px solid #2c2c2c
    }

    .dg li.save-row {
        line-height: 25px;
        background: #dad5cb;
        border: 0
    }

    .dg li.save-row select {
        margin-left: 5px;
        width: 108px
    }

    .dg li.save-row .button {
        margin-left: 5px;
        margin-top: 1px;
        border-radius: 2px;
        font-size: 9px;
        line-height: 7px;
        padding: 4px 4px 5px 4px;
        background: #c5bdad;
        color: #fff;
        text-shadow: 0 1px 0 #b0a58f;
        box-shadow: 0 -1px 0 #b0a58f;
        cursor: pointer
    }

    .dg li.save-row .button.gears {
        background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
        height: 7px;
        width: 8px
    }

    .dg li.save-row .button:hover {
        background-color: #bab19e;
        box-shadow: 0 -1px 0 #b0a58f
    }

    .dg li.folder {
        border-bottom: 0
    }

    .dg li.title {
        padding-left: 16px;
        background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2)
    }

    .dg .closed li.title {
        background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)
    }

    .dg .cr.boolean {
        border-left: 3px solid #806787
    }

    .dg .cr.color {
        border-left: 3px solid
    }

    .dg .cr.function {
        border-left: 3px solid #e61d5f
    }

    .dg .cr.number {
        border-left: 3px solid #2FA1D6
    }

    .dg .cr.number input[type=text] {
        color: #2FA1D6
    }

    .dg .cr.string {
        border-left: 3px solid #1ed36f
    }

    .dg .cr.string input[type=text] {
        color: #1ed36f
    }

    .dg .cr.function:hover, .dg .cr.boolean:hover {
        background: #111
    }

    .dg .c input[type=text] {
        background: #303030;
        outline: none
    }

    .dg .c input[type=text]:hover {
        background: #3c3c3c
    }

    .dg .c input[type=text]:focus {
        background: #494949;
        color: #fff
    }

    .dg .c .slider {
        background: #303030;
        cursor: ew-resize
    }

    .dg .c .slider-fg {
        background: #2FA1D6;
        max-width: 100%
    }

    .dg .c .slider:hover {
        background: #3c3c3c
    }

    .dg .c .slider:hover .slider-fg {
        background: #44abda
    }
    </style>
</head>

<body>
<div id="info">
    <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - light probe
</div>

<script type="module">

    import * as THREE from './threejs/three.module.js';

    import {GUI} from './threejs/jsm/libs/dat.gui.module.js';

    import {OrbitControls} from './threejs/jsm/controls/OrbitControls.js';
    import {LightProbeGenerator} from './threejs/jsm/lights/LightProbeGenerator.js';

    var mesh, renderer, scene, camera;

    var gui;

    var lightProbe;
    var directionalLight;

    // linear color space
    var API = {
        lightProbeIntensity: 1.0,
        directionalLightIntensity: 0,
        envMapIntensity: 0
    };

    init();

    function init() {

        // renderer
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // tone mapping
        //renderer.toneMapping = LinearToneMapping;
        //renderer.toneMappingExposure = API.exposure;

        // gamma
        renderer.gammaOutput = true;
        renderer.gammaFactor = 2.2; // approximate sRGB
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        // scene
        scene = new THREE.Scene();

        // camera
        camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(0, 0, 30);

        // controls
        var controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', render);
        controls.minDistance = 10;
        controls.maxDistance = 50;
        controls.enablePan = false;

        // probe
        lightProbe = new THREE.LightProbe();
        lightProbe.castShadow = true;
        scene.add(lightProbe);

        /*// light
        directionalLight = new THREE.DirectionalLight(0xffffff, API.directionalLightIntensity);
        directionalLight.position.set(100, 100, 100);
        directionalLight.castShadow = true;
        scene.add(directionalLight);*/

        // envmap
        var genCubeUrls = function (prefix, postfix) {

            return [
                prefix + 'px' + postfix, prefix + 'nx' + postfix,
                prefix + 'py' + postfix, prefix + 'ny' + postfix,
                prefix + 'pz' + postfix, prefix + 'nz' + postfix
            ];

        };

        var urls = genCubeUrls('pisa/', '.png');

        new THREE.CubeTextureLoader().load(urls, function (cubeTexture) {

            cubeTexture.encoding = THREE.sRGBEncoding;

            scene.background = cubeTexture;

            lightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture));

            var geometry = new THREE.BoxBufferGeometry(10, 10, 10);
            //var geometry = new TorusKnotBufferGeometry( 4, 1.5, 256, 32, 2, 3 );

            var material = new THREE.MeshStandardMaterial({
                color: 0xffffff,
                metalness: 0,
                roughness: 0,
                envMap: cubeTexture,
                envMapIntensity: API.envMapIntensity,

            });

            // mesh
            mesh = new THREE.Mesh(geometry, material);
            mesh.receiveShadow = true;
            mesh.castShadow = true;
            scene.add(mesh);

            var g = new THREE.PlaneBufferGeometry(100, 100);
            var m = new THREE.ShadowMaterial({
                color: 0x000000,
                side: THREE.DoubleSide,
                transparent: true,
                opacity: .66
            });
            var o = new THREE.Mesh(g, m);
            o.receiveShadow = true;
            o.rotation.x = -Math.PI/2;
            o.position.y = -5;
            scene.add(o);

            render();

        });


        // gui
        gui = new GUI();

        gui.width = 300;

        gui.domElement.style.userSelect = 'none';

        var fl = gui.addFolder('Intensity');

        fl.add(API, 'lightProbeIntensity', 0, 1, 0.02)
            .name('light probe')
            .onChange(function () {

                lightProbe.intensity = API.lightProbeIntensity;
                render();

            });

        /*fl.add(API, 'directionalLightIntensity', 0, 1, 0.02)
            .name('directional light')
            .onChange(function () {

                directionalLight.intensity = API.directionalLightIntensity;
                render();

            });*/

        fl.add(API, 'envMapIntensity', 0, 1, 0.02)
            .name('envMap')
            .onChange(function () {

                mesh.material.envMapIntensity = API.envMapIntensity;
                render();

            });

        fl.open();

        // listener
        window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize() {

        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        render();

    }

    function render() {

        renderer.render(scene, camera);

    }

</script>


</body>
</html>

donmccurdy · October 15, 2020, 5:11am

A LightProbe does not cast shadows onto objects in three.js.

niao · October 15, 2020, 5:40am

Could make a similar to LightProbe include casting shadows automatically and dynamically?
So, anybody even unknown where are placed lighting in the real space, will cast shadows for 3D object flexibly with immersion.
Is there idea?
As you know, in AR, that is not easy to estimate lighting accurately from 2D image like camera frame.
But, LightProbe provide easily and automatically good lighting befitting to real space.
That is one condition for estimating lights.
So, I think one workflow the following:

I will detect special point cloud from camera.
I will reconstructs real space based on point cloud.
Reconstructure will be 3D model like glTF or obj.
I will set the environment as reconstructure model.
Reconstructure model might be used to cube panorama.
By LightEstimation(similar to LightProbe, but it can cast shadow automatically), any virtual 3D object will cast shadows.
Assume already accomplished step 1,2 and 3.
Is it possible to implements LightEstimation of step 4?
Thanks.

donmccurdy · October 15, 2020, 6:17am

I won’t say it’s not possible, but it would be very hard, and I don’t know how to help you do this. I think you may want to look around for examples that come close to the effect that you want, as “proof of existence”, and then try to figure out how to accomplish the same.

Topic		Replies	Views
Light probes (r104) Questions lighting	12	4323	February 2, 2021
Direction light shadow working weird Questions shadows , directional-light	2	185	March 7, 2024
Shadows setup question Questions shadows , webgl-renderer	2	540	March 22, 2022
Shadow DirectionalLight ThreeJS Questions shadows	1	531	May 24, 2022
PointLight not casting shadow Questions materials	0	445	December 22, 2021

Make shadow with only LightProbe

Related topics