three+threeasy实现火苗燃烧动画效果代码-html代码-BFW代码库

three+threeasy实现火苗燃烧动画效果代码

代码语言：html

所属分类：动画

代码描述：three+threeasy实现火苗燃烧动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
html, body {
  margin: 0;
  padding: 0;
}
body {
	background: #eae2b7;
}

.canvasEl {
  width: 80vmin;
  height: 80vmin;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  box-shadow: 0 0 30px 1px rgb(120, 1, 22);
}
</style>

  
  
</head>

<body translate="no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.3.js"></script>
<script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/160/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/160/jsm/",
			"threeasy": "//repo.bfw.wiki/bfwrepo/js/module/threeasy.0.1.19.js"
    }
  }     
</script>

<div class="canvasEl"></div>
  
      <script id="rendered-js" type="module">
console.clear();

import * as THREE from "three";
import Threeasy from "threeasy";

const app = new Threeasy(THREE, {
  domElement: document.querySelector(".canvasEl") });

const geo = new THREE.BoxGeometry(2.3, 2.3);


let varying = `precision highp float;
varying vec2 vPos;
uniform float time;`;
const mat = new THREE.ShaderMaterial({
  uniforms: {
    time: {
      value: app.clock.getElapsedTime() } },


  vertexShader: `
		${varying}
		
		void main() {
			vPos = position.xy;
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
		}
	`,
  fragmentShader: `
		${varying}

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