three打造3d三位灯笼-html代码-BFW代码库

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgb(238,238,238);
  background: radial-gradient(circle, rgba(238,238,238,1) 0%, rgba(199,166,152,1) 53%, rgba(201,87,87,1) 100%);
  cursor: pointer;
}
</style>

</head>
<body translate="no">



<script type="x-shader/x-vertex" id="vs-lines">

uniform float globalTime;
uniform vec3 gravity;
uniform vec3 gravity2;
uniform float spacing;

attribute vec3 customColor;
attribute float seed;
attribute float seed2;
attribute float draw;
attribute float index2;
attribute vec3 norm;

varying vec3 vColor;
varying float vDraw;
varying vec3 vNormal;

void main() {

vDraw = draw;
vColor = customColor;

vec3 displacement = vec3(0.0,0.0,0.0);
vec3 forceDirection = vec3(0.0,0.0,0.0);

float displacementFactor = pow(index2, 1.5);
float displacementFactor2 = pow(index2, 3.5);
float displacementFactor3 = pow(1.0-index2, 1.0);
  
// "gravity"
vec3 g = gravity;
g.x *= displacementFactor2 * seed2;

// "wind"
forceDirection.x = sin(globalTime*0.01+seed2*0.75+index2*0.5) * 0.1*displacementFactor;
forceDirection.y = cos(globalTime*0.1+seed2*1.0+index2*1.0) * 0.1*displacementFactor;
forceDirection.z = sin(globalTime*0.1+seed2*0.5+index2*1.0) * 0.1*displacementFactor;

displacement = g + forceDirection + ((1.0-index2)*gravity2) * seed;

vec3 aNormal = norm;
aNormal.xyz += displacement*displacementFactor;

vNormal = norm*(1.0-index2);
vNormal += (gravity2-gravity)*0.05;

vec3 animated = position;

// curl it slightly
animated.x += aNormal.x*index2*20.0*displacementFactor3;

animated += aNormal*index2*(spacing*seed);

if (animated.y < -150.0+seed2*20.0) {
  animated.y = -150.0+seed2*20.0;
  vDraw = 0.0;
}

vec4 mvPosition = modelViewMatrix * vec4( animated, 1.0 );
gl_Position = projectionMatrix * mvPosition;

}

</script>
<script type="x-shader/x-fragment" id="fs-lines">

uniform vec3 color;

varying vec3 vColor;
varying float vDraw;
varying vec3 vNormal;

void main() {

if (vDraw == 0.0) {
  discard;
}

float depth = gl_FragCoord.z / gl_FragCoord.w;
float fogFactor = smoothstep( 450.0, 300.0, depth );		

vec3 light = vec3(1.0,1.0,1.0);
float d = pow(max(0.3,dot(vNormal.xyz, light))*2.0, 1.5);
gl_FragColor = vec4( (color * vColor) * d * fogFactor, 1.0 );

}

</script>

<script type="x-shader/x-vertex" id="vs-matcap">

	varying vec2 vN;

	void main() {

		vec3 e = normalize( vec3( modelViewMatrix * vec4( position, 1.0 ) ) );
		vec3 n = normalize( normalMatrix * normal );

		vec3 r = reflect( e, n );
		float m = 2. * sqrt( pow( r.x, 2. ) + pow( r.y, 2. ) + pow( r.z + 1., 2. ) );
		vN = r.xy / m + .5;

		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1. );

	}

</script>
<script type="x-shader/x-vertex" id="fs-matcap">
	
	uniform sampler2D tMatCap;

	varying vec2 vN;

	void main() {
		
		vec3 base = texture2D( tMatCap, vN ).rgb;
		gl_FragColor = vec4( base, 0.44 );

	}
	
</script>
<script id="vs-halo" type="x-shader/x-vertex">
  
  varying vec3 vNormal; 
  
  void main() { 
    
    vNormal = normalize( normalMatrix * normal ); 
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 
  
  }
  
</script>
<script id="fs-halo" type="x-shader/x-vertex">
  
    varying vec3 vNormal; 
  
  void main() { 
    
      float intensity = pow( 0.5 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) ), 0.5 ); 
      gl_FragColor = vec4( 0.96, 0.96, 0.86, 0.6 ) * intensity; 
      
  }
  
</script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/THREEProjector.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/GLTFLoader.js'></script>
<script>
var container, camera, scene, renderer;
var hair, lanternSphere, lanternRings;
var flower, flower2;
var goldMat;

var delta, time, oldTime;

var uniforms;

var gravity = new THREE.Vector3(0, 0, 0);
var gravity2 = new THREE.Vector3(0, 0, 0);

var mouse = new THREE.Vector2(0, 0);

var mouseObj = {

  x: 0,
  y: 0,
  vx: 0,
  vy: 0 };



var projector = new THREE.Projector();
var raycaster = new THREE.Raycaster();
var collisionMesh;


window.onload = () => {

  init();
  animate();

};

function init() {

  container = document.createElement('div');
  document.body.appendChild(container);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xC95757);
  createCamera();
  createLights();
  //loadGLTFModel(gltfURL);
  createLantern();
  createCollisionMesh();
  createHair();

  createRenderer();

  window.addEventListener('resize', onWindowResize, false);
  document.addEventListener('mousemove', onMouseMove, false);
  document.addEventListener('touchmove', onTouchMove, false);

}

function createCamera() {

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);

  camera.position.set(0, 0, 400);
  camera.lookAt(scene.position).........完整代码请登录后点击上方下载按钮下载查看