three实现曲线波动动画效果代码

代码语言:html

所属分类:动画

代码描述:three实现曲线波动动画效果代码

代码标签: three 曲线 波动 动画

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

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



</head>

<body>
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.149.js"></script>
      <script >
let columnCount = 120;
let screenAspect = window.innerWidth / window.innerHeight;
let cellWidth = 1;
let rowCount = 120;
const zScaleMin = 0.1;

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(columnCount / -2, columnCount / 2, columnCount / screenAspect / 2, columnCount / screenAspect / -2, 0.1, 10000);
const renderer = new THREE.WebGLRenderer({
  antialias: true });

renderer.setPixelRatio(1);
renderer.setSize(window.innerWidth, window.innerHeight);
scene.add(camera);
document.body.append(renderer.domElement);

const canvas = renderer.domElement;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
renderer.setClearColor(0x110000);

camera.position.z = 85;
const ambientLight = new THREE.AmbientLight(
0xffffff,
0.5);

scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(
0xff0000,
0.7);

scene.add(directionalLight);
directionalLight.position.x = 35;
directionalLight.position.y = 35;
directionalLight.position.z = 85;
dir.........完整代码请登录后点击上方下载按钮下载查看

网友评论0