three+tween实现三维波涛汹涌海浪动画效果代码-html代码-BFW代码库

three+tween实现三维波涛汹涌海浪动画效果代码

代码语言：html

所属分类：三维

代码描述：three+tween实现三维波涛汹涌海浪动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

</head>
<body>

<script id="vertexShader" type="x-shader/x-vertex">

</script>


<script id="fragmentShader" type="x-shader/x-fragment">

</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.96.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tween.min.js"></script>
<script  >
    const clock = new THREE.Clock();
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();

let camera, geometry;

const init = () => {
  scene.background = new THREE.Color(0x551199);
  scene.fog = new THREE.FogExp2(0x551199, 0.0003);

  initCamera();

  document.body.appendChild(renderer.domElement);
};

const initCamera = () => {
  const fov = 45;
  const aspect = window.innerWidth / window.innerHeight;
  camera = new THREE.PerspectiveCamera(fov, aspect, 1, 10000);
  camera.position.y = 120;

  createMesh();
};

const createMesh = () => {
  geometry = new THREE.PlaneBufferGeometry(20000, 20000, 128, 128);
  geometry.rotateX(-Math.PI / 2);

  const textur.........完整代码请登录后点击上方下载按钮下载查看