three+threeasy实现圣诞快乐立体方块裂开上下浮动动画效果代码-html代码-BFW代码库

three+threeasy实现圣诞快乐立体方块裂开上下浮动动画效果代码

代码语言：html

所属分类：动画

代码描述：three+threeasy实现圣诞快乐立体方块裂开上下浮动动画效果代码

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

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

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

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

  
</head>

<body>
  <!-- IMAGE FROM https://designsbywinther.com/free-merry-christmas-svg-dxf-png-jpeg/ -->
  
      <script type="module">
console.clear();

import * as THREE from "//repo.bfw.wiki/bfwrepo/js/module/three/build/159/three.module.js";
import Threeasy from "//repo.bfw.wiki/bfwrepo/js/module/threeasy.mjs";

const fragmentCustom = `
  uniform float size;
  uniform float scale;
  uniform vec3 pos;
  uniform vec3 color;
  uniform sampler2D texture1;
  uniform vec3 lightDirection;
  
  varying vec2 vUv;
  varying vec3 vNormal;

  vec3 lightColor = vec3(1.2, 1.2, 1.2);
  float ambientStrength = 0.6;

  void main(){
    vec2 normalUv = vUv - 0.5;
    vec4 text = texture2D(texture1, ((pos.xy*(1./scale)) + normalUv) / (size*(1./scale)));

    vec4 col = mix(vec4(color, 1.0), text, text.a);

    vec3 norm = normalize(vNormal);
    float nDotL = dot(lightDirection, norm);

    nDotL = clamp(nDotL, 0.0, 1.0); 
    nDotL = nDotL * (1.0 - ambientStrength) + ambientStrength;

    vec3 diffuseColor = lightColor * nDotL * col.rgb;

    gl_FragColor = vec4(diffuseColor, 1.);
  }
`
const  vertexCustom = `
	varying vec2 vUv;
	varying vec3 vNormal;
	
	void main(){
		vUv = uv;
		vNormal = normal;
		
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
`;

const speed = 0.2;

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