Three.js实战--水天一色的小岛

 话不多说，上效果图：

 

代码如下：

import * as THREE from "three";
// 导入控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
// 导入水面
import {Water} from 'three/examples/jsm/objects/Water2'
// 导入gltf载入库
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader'
import {RGBELoader} from'three/examples/jsm/loaders/RGBELoader'
// 初始化场景
const scene = new THREE.Scene();

// 初始化相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  2000
);
// 设置相机位置
camera.position.set(-50, 50, 130);
// 更新摄像头宽高比例
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像头投影矩阵
camera.updateProjectionMatrix();

scene.add(camera);

const renderer = new THREE.WebGLRenderer({
  // 抗锯齿
  antialias: true,
//   对数深度缓冲区
  logarithmicDepthBuffer:true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
// 设置渲染器宽高
renderer.setSize(window.innerWidth,window.innerHeight)
// 监听器屏幕的大小改变，修改渲染器的宽高，相机的比例
window.addEventListener('resize',()=>{
    camera.aspect=window.innerWidth/window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth,window.innerHeight)
})

// 将渲染器添加到页面
document.body.appendChild(renderer.domElement)

// 实例化控制器
const controls=new OrbitControls(camera,renderer.domElement)
function render(){
    // 渲染场景
    renderer.render(scene,camera)
    // 引擎自动更新渲染器
    requestAnimationFrame(render)
}

render()


// 添加平面
// const planeGeometry=new THREE.PlaneGeometry(100,100)
// const planeMaterial=new THREE.MeshBasicMaterial({
//     color:0xffffff,
// })
// const plane=new THREE.Mesh(planeGeometry,planeMaterial)
// scene.add(plane)

// 创建一个巨大的天空球
let texture=new THREE.TextureLoader().load('./textures/sky.jpg')
const skyGeometry=new THREE.SphereGeometry(1000,60,60)
const skyMaterial=new THREE.MeshBasicMaterial({
    color:0xffffff,
    map:texture
})
const sky=new THREE.Mesh(skyGeometry,skyMaterial)
skyGeometry.scale(1,1,-1)
scene.add(sky)

scene.background=texture
scene.background=texture

// 视频纹理
const video=document.createElement('video')
video.src='./textures/sky.mp4'
video.loop=true
// video.muted
window.addEventListener('click',(e)=>{
    // 当鼠标移动的时候播放视频
    // 判断视频是否处于播放状态
    if(video.paused){
        video.play()
        skyMaterial.map=new THREE.VideoTexture(video)
        skyMaterial.map.needUpdate=true
    }
})

// 载入环境纹理hdr
const hdrLoader=new RGBELoader()
hdrLoader.loadAsync("./assets/050.hdr").then((texture)=>{
    texture.mapping=THREE.EquirectangularReflectionMapping
    scene.background=texture
    scene.environment=texture
})

// 添加平行光
const light=new THREE.DirectionalLight(0xffffff,1)
light.position.set(-100,100,10)
scene.add(light)
// 创建平面
const waterGeometry=new THREE.CircleGeometry(300,64)
const water=new Water(waterGeometry,{
    textureWidth:1024,
    textureHeight:1024,
    color:0xeeeeff,
    flowDirection:new THREE.Vector2(1,1),
    scale:1
})
water.position.y=3
//水面旋转至水平
water.rotation.x=-Math.PI/2
scene.add(water)

// 添加小岛模型
// 实例化gltf载入库
const loader=new GLTFLoader()
// 实例化Draco载入库
const dracoLoader=new DRACOLoader()
dracoLoader.setDecoderPath('./draco/')
loader.setDRACOLoader(dracoLoader)

loader.load('./model/island2.glb',(gltf)=>{
    scene.add(gltf.scene)
})

需要本案例相关模型资源的可以私信我！