threejs打造落日夕阳下海面跳跃的海豚三维动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：threejs打造落日夕阳下海面跳跃的海豚三维动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>

  <meta charset="UTF-8">

  
<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>


</head>

<body>
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CustomEase3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Sky.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Water.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script>
      <script >
let camera, scene, renderer, water;

const ease = CustomEase.create(
  "custom",
  "M0,0,C0.042,0.224,0.268,0.35,0.524,0.528,0.708,0.656,0.876,0.808,1,1"
);

const playHead1 = { value: 0 };
const playHead2 = { value: 0 };
const playHead3 = { value: 0 };
const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });
tl.to(playHead1, { value: 1, duration: 3, ease }, 0.3);
tl.to(playHead2, { value: 1, duration: 3, ease }, 0);
tl.to(playHead3, { value: 1, duration: 3, ease }, 0.4);

const path = new THREE.Path();
path.moveTo(0, 40);
path.bezierCurveTo(39.4459, 17.0938, 62.5, 0, 100, 0);
path.bezierCurveTo(137.5, 0, 173.133, 19.1339, 200, 40);
const pathPoints = path.getPoints();

init();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  document.body.appendChild(renderer.domElement);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    55,
    window.innerWidth / window.innerHeight,
    1,
    20000
  );
  camera.position.set(
    3.1590873116966085,
    12.558741624242224,
    162.85051507508345
  );
  camera.rotation.x = -0.01571091803028279;
  camera.rotation.y = 0.019393868089754202;
  camera.rotation.z = 0.0003047014328572437;

  water = generateSea(scene);
  addBackground(scene, renderer, water);
  addObjects(scene);

  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.maxPolarAngle = Math.PI * 0.495;
  controls.target.set(0, 10, 0);
  controls.minDistance = 40.0;
  controls.maxDistance = 200.0;
  controls.update();

  window.addEventListener("resize", onWindowResize);
}

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

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

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  water.material.uniforms["time"].value += 1.0 / 60.0;
  renderer.render(scene, camera);
}

function getCurve(scene, wMin, wMax, hMin, hMax, z) {
  const initialPoints = pathPoints.map(
    ({ x, y }) =>
      new THREE.Vector3(
        map(x, 0, 200, wMin, wMax),
        map(y, 0, 40, hMax, hMin),
        z
      )
  );
  const curve = new THREE.CatmullRomCurve3(initialPoints);
  curve.curveType = "centripetal";
  curve.closed = false;
  return curve;
}

function addObjects(scene) {
  addAmbientLight(scene);
  const curve1 = getCurve(scene, -140, 80, -10, 20, 10);
  const curve2 = getCurve(scene, -100, 100, -15, 25, 30);
  const curve3 = getCurve(scene, -80, 120, -10, 20, 50);
  loadModel(scene, curve1, playHead1);
  loadModel(scene, curve2, playHead2);
  loadModel(scene, curve3, playHead3);
}
function addAmbientLight(scene) {
  const color = 0xffffff;
  const intensity = 0.6;
  const light = new THREE.AmbientLight(color, intensity);
  scene.add(light);
}

function loadModel(scene, curve, ph) {
  const loader = new THREE.GLTFLoader();
  loader.load("//repo.bfw.wiki/bfwrepo/threemodel/dolphin.glb", function (gltf) {
    const mesh = gltf.scene.children[0];
    addPath(scene, mesh, curve, ph);
  });
}

function addPath(scene, mesh, curve, playHead) {
  const { geometry, material } = mesh;
  geometry.rotateZ(-Math.PI * 0.5);
  let numPoints = 511;
  let cPoints = curve.getSpacedPoints(numPoints);
  let cObjects = curve.computeFrenetFrames(numPoints, true);

  let data = [];
  cPoints.forEach((v) => {
    data.push(v.x, v.........完整代码请登录后点击上方下载按钮下载查看