three实现一个会呼吸的三维网格波动起伏动画效果代码-html代码-BFW代码库

three实现一个会呼吸的三维网格波动起伏动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现一个会呼吸的三维网格波动起伏动画效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
<style>
canvas {
  display: block;
}
</style>


</head>

<body >
  <canvas id="stage" width="637" height="837" style="width: 567px; height: 744px;"></canvas>
  <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>



const size = { x: window.innerWidth, y: window.innerHeight },
canvas = document.getElementById("stage"),
renderer = new THREE.WebGLRenderer({ canvas }),
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(45, size.x / size.y, 1, 500),
clock = new THREE.Clock(),
color1 = { r: 175 / 255, g: 1, b: 0 },
color2 = { r: 1, g: 100 / 255, b: 0 },
r = 3;

let playing;

const lerp = (x, y, a) => x * (1 - a) + y * a;

const setSize = () => {
  size.x = window.innerWidth;
  size.y = window.innerHeight;
  camera.aspect = size.x / size.y;
  camera.updateProjectionMatrix();
  renderer.setSize(size.x, size.y);
  renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
};

const handleResize = e => {
  setSize();
};

const geometry = new THREE.BoxGeometry(.8, .8, .8);
const material = new THREE.MeshStandardMaterial({ color: "rgb(175, 255, 0)" });
const gridSize = new THREE.Vector2(12, 12);
const cellSize = new THREE.Vector2(1, 1);
const cubes = Array.from(Array(gridSiz.........完整代码请登录后点击上方下载按钮下载查看