天空倒影

创建水面

import { Water } from 'three/addons/objects/Water.js';
//water
const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
let water = new Water(
    waterGeometry,
    {
        textureWidth: 512,
        textureHeight: 512,
        waterNormals: new THREE.TextureLoader()
            .load('textures/waternormals.jpg', function (texture) {
                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            }),
        sunDirection: new THREE.Vector3(),//阳光方向
        sunColor: 0xffffff,//阳光颜色
        waterColor: 0x001e0f,//水颜色
        distortionScale: 3.7,//物体倒影分散度
        fog: scene.fog !== undefined
    }
);
water.rotation.x = - Math.PI / 2;

scene.add(water);

创建天空

import { Sky } from 'three/addons/objects/Sky.js';

const sky = new Sky();
sky.scale.setScalar(10000);
scene.add(sky);
const skyUniforms = sky.material.uniforms;
skyUniforms['turbidity'].value = 20;//浑浊度
skyUniforms['rayleigh'].value = 2;//阳光散射黄昏效果
skyUniforms['mieCoefficient'].value = 0.005;//散射系数
skyUniforms['mieDirectionalG'].value = 0.8;//定向散射值
// 太阳
const sun = new THREE.Vector3();
const pmremGenerator = new THREE.PMREMGenerator(renderer);
const phi = THREE.MathUtils.degToRad(88);
const theta = THREE.MathUtils.degToRad(180);
sun.setFromSphericalCoords(1, phi, theta);
sky.material.uniforms['sunPosition'].value.copy(sun);
water.material.uniforms['sunDirection'].value.copy(sun).normalize();
scene.environment = pmremGenerator.fromScene(sky).texture;