THREE.js室内地面效果

 1.首先创建一个点光源

function createPointLight(){

bulbMat = new THREE.MeshStandardMaterial( {

    emissive: 0xffffee,

    emissiveIntensity: 1,

    color: 0xffffff

  } );

// wcq 2022、11、02 点光源对（主要对地面的影响）

  var bulbGeometry = new THREE.SphereBufferGeometry( 5, 16, 8 );

  let light_mesh = new THREE.Mesh( bulbGeometry, bulbMat )

  // pointLight = new THREE.PointLight( 0xffee88, 1, 500, 2 );

  pointLight = new THREE.PointLight( 0xffffff, 1, 600, 2 );

  pointLight.add( light_mesh );

  scene.add( pointLight );

  pointLight.castShadow = true;

  pointLight.power = 90000000;

  pointLight.position.set( -100, 240, 42.5 );

  pointLight.shadow.mapSize.width = 2048;

  pointLight.shadow.mapSize.height = 2048;

}

  2.渲染器操作

            renderer = new THREE.WebGLRenderer({ antialias: true });

            renderer.setPixelRatio($(container_mobile).devicePixelRatio);

            renderer.setSize($(container_mobile).width(), $(container_mobile).height());

            renderer.antialias=true;

            renderer.alpha=true;

            // 渲染器开启阴影

            renderer.shadowMap.enabled = true;

            renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default

            // 为了达到更好的地面效果(注意以下几行可能会抑制场景中的光效)

            renderer.physicallyCorrectLights = true;

            renderer.gammaInput = true;

            renderer.gammaOutput = true;

            renderer.toneMapping = THREE.ReinhardToneMapping;

           // 将灯泡表面的强度转换为辐照度,

            bulbMat.emissiveIntensity=pointLight.intensity / Math.pow( 0.02, 2.0 );

            // 能达到非常理想的场景效果.

            // renderer.toneMappingExposure = Math.pow( 0.68, 5.0 );

            // 加大环境光

            // mAmbientLight.intensity =10.8;

3.还有一点非常重要(地面的材质)

// 开始设置地面材质

tMaterial = new THREE.MeshStandardMaterial( {

            // roughness: 0,

            roughness: 0.8,

            // color: 0xffffff,

            // color: 0xffee88,

            color: 0x666666,

            metalness: 0.2,

            bumpScale: 0.0005

        } );

        var textureLoader = new THREE.TextureLoader();

// 设置纹理贴图

            textureLoader.load( "./img/hardwood2_diffuse.jpg", function ( map ) {

            map.wrapS = THREE.RepeatWrapping;

            map.wrapT = THREE.RepeatWrapping;

            map.anisotropy = 4;

            // map.repeat.set( 0.25, 0.6 );

            tMaterial.map = map;

            tMaterial.needsUpdate = true;

        } );

        // 加入凹凸贴图

            textureLoader.load( "./img/hardwood2_bump.jpg", function ( map ) {

            map.wrapS = THREE.RepeatWrapping;

            map.wrapT = THREE.RepeatWrapping;

            map.anisotropy = 4;

            // map.repeat.set( 0.25, 0.6 );

            tMaterial.bumpMap = map;

            tMaterial.needsUpdate = true;

        } );

// 加入粗糙度贴图

            textureLoader.load( "./img/hardwood2_roughness.jpg", function ( map ) {

            map.wrapS = THREE.RepeatWrapping;

            map.wrapT = THREE.RepeatWrapping;

            map.anisotropy = 4;

            // map.repeat.set( 0.25, 0.6 );

            tMaterial.roughnessMap = map;

            tMaterial.needsUpdate = true;

        } );