three打造一个三维多彩玉石旋转动画效果代码

代码语言:html

所属分类:三维

代码描述:three打造一个三维多彩玉石旋转动画效果代码

代码标签: 三维 多彩 玉石 旋转 动画 效果

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

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body {
  height: 100vh;
  background-color: #000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
</style>

 
</head>

<body translate="no" >
  <!-- Shader Collab
 * By eliza & ilithya | 2020
 *
 * https://www.elizasj.com/
 * https://twitter.com/iamelizasj
 *
 * https://www.ilithya.rocks/
 * https://twitter.com/ilithya_net -->

<div id="shadercollab"></div>
<script id="vertex" type="x-shader/x-vertex">
	void main() { gl_Position = vec4(position, 1.0); }
</script>

<script id="fragment" type="x-shader/x-vertex">
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
	
const int RAYMARCH_MAX_STEPS = 200;
const float RAYMARCH_MAX_DIST = 10.;
const float EPSILON = 0.0001;
	
// Pallete function by Inigo Quilez - iquilezles.org
// a - brigthness, b - contrast, c - osc, d - phase
vec3 palette(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d) { return a + b*cos( 6.28318*(c*t+d) ); }
	
// Got rotation functions from akella - twitter.com/akella
mat4 rotationMatrix(vec3 axis, float angle) {
    axis = normalize(axis);
    float s = sin(angle);
    float c = cos(angle);
    float oc = 1.0 - c;
    
    return mat4(oc * axis.x * axis.x + c, 
				oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
                oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           
				oc * axis.y * axis.z - axis.x * s,  0.0,
                oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * ax.........完整代码请登录后点击上方下载按钮下载查看

网友评论0