three.js实现小岛

1.导入对象

// 导入水面
import {Water} from "three/examples/jsm/objects/Water2";
// 导入qlft载入库
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";

2.创建天空

 

let texture = new THREE.TextureLoader().load("./textures/land/sky.jpg");
const skyGeometry = new THREE.SphereGeometry(1000,60,60);
const skyMaterial = new THREE.MeshBasicMaterial({
    map:texture
});
skyGeometry.scale(1, 1, -1)//scale.z=-1进入圆形是有贴图，z=1 进入原型是黑的
const sky = new THREE.Mesh(skyGeometry,skyMaterial)
skyMaterial.map.needsUpdate = true;  //视频循环播放

const video = document.createElement("video");
video.src = "./textures/land/sky.mp4";
video.loop = true;

window.addEventListener("click", (e) => {
    // 当鼠标移动的时候播放视频
    // 判断视频是否处于播放状态
    if (video.paused) {
      video.play();
      let texture = new THREE.VideoTexture(video);
      skyMaterial.map = texture;
      skyMaterial.map.needsUpdate = true;  //告诉renderer这一帧我该更新缓存了
    }
  });
scene.add(sky)

3.创建水面

const waterGeometry = new THREE.CircleBufferGeometry(300,64);
const water = new Water(waterGeometry,{
    textureWidth:1024,
    textureHeight:1024,
    color:0xeeeeff,
    flowDirection:new THREE.Vector2(1,1),
    scale:1
})
water.rotation.x = -Math.PI / 2;
water.position.y = 10;
scene.add(water)

4.导入小岛

// 实例化gltf载入库
const loader = new GLTFLoader();
// 实例化draco载入库
const dracoLoader = new DRACOLoader();
// 添加draco载入库
dracoLoader.setDecoderPath("./draco/");
// 添加draco载入库
loader.setDRACOLoader(dracoLoader);

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

5.载入环境纹理

 

const hdrLoader = new RGBELoader();
hdrLoader.loadAsync("./assets/050.hdr").then((texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;
});

6.渲染器设置注意事项

 

const renderer = new THREE.WebGL1Renderer({
     // 设置抗锯齿
     antialias: true,
     //   对数深度缓冲区
    logarithmicDepthBuffer: true,
});