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

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 * axis.z + c,           
				0.0,
                0.0,                                
				0.0,                                
				0.0,                                
				1.0);
}

vec3 rotate(vec3 v, vec3 axis, float angle) {
	mat4 m = rotationMatrix(axis, angle);
	return (m * vec4(v, 1.0)).xyz;
}

// Torus function by Inigo Quilez - iquilezles.org
// p - position, t - size
float sdTorus(vec3 p, vec2 t) {
	vec2 q = vec2(length(p.xz)-t.x,p.y);
	return length(q)-t.y;
}
	
float scene(vec3 pos) {
	vec3 rotation = rotate(vec3(pos.x, pos.y, pos.z+1.5), vec3(1.), u_time*2.);	
	float size = 0.5;	
	float torus = sdTorus(rotation, vec2(size, size*0.6));
	
	return torus;
}

vec4 raymarch(vec3 rayDir, vec3 rayStep) {
	// Define the start state
	// reset to 0 steps
	float currentDist = 0.0; // signed distance
	float rayDepth = 0.0;
	vec3 rayLength = rayDir;

	vec3 gradient = mix(vec3(0.0, 0.0, sin(u_time)*.2), vec3(0.5, 0.0 ,0.5), rayDir.y);
	vec4 b.........完整代码请登录后点击上方下载按钮下载查看