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);
  scene.add(camera);

}

function createLights() {

  const hemisphereLight = new THREE.HemisphereLight(
  0xddeeff,
  0x202020,
  3.5);


  const mainLight = new THREE.DirectionalLight(0xffffff, 5);
  mainLight.position.set(10, 10, 10);

  scene.add(hemisphereLight, mainLight);

}

function createLantern() {

  var scaleX = 1.25;
  var radius = 90;

  var sphereGeometry = new THREE.SphereBufferGeometry(radius + 1.5, 32, 32);
  var torusGeometry = new THREE.TorusBufferGeometry(radius, 1.5, 4, 80);
  var cylinderGeometry = new THREE.CylinderBufferGeometry(radius / 2.5, radius / 2.5, 20, 32);
  var handleGeometry = new THREE.TorusBufferGeometry(radius / 2.5, 1.5, 4, 60);

  var sphereMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });

  const textureLoader = new THREE.TextureLoader();
  var matcap = textureLoader.load('http://repo.bfw.wiki/bfwrepo/image/5e2b80eb53d22.png');

  goldMat = new THREE.ShaderMaterial({
    transparent: false,
    side: THREE.DoubleSide,
    uniforms: {
      tMatCap: { type: 't', value: matcap } },

    vertexShader: document.getElementById('vs-matcap').textContent,
    fragmentShader: document.getElementById('fs-matcap').textContent,
    flatShading: false });


  var haloMat = new THREE.ShaderMaterial({

    uniforms: {},
    vertexShader: document.getElementById('vs-halo').textContent,
    fragmentShader: document.getElementById('fs-halo').textContent,
    side: THREE.BackSide,
    transparent: true });



  lanternSphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  lanternSphere.scale.x = scaleX;

  var ringTop = new THREE.Mesh(cylinderGeometry, goldMat);
  ringTop.position.y = radius;

  var handleTop = new THREE.Mesh(handleGeometry, goldMat);
  handleTop.position.y = radius * 1.15;

  // var ringBottom = new THREE.Mesh(cylinderGeometry, goldMat);
  // ringBottom.position.y = -radius * 0.9; 
  // ringBottom.scale.set(1.5, 0.75, 1.35);

  var torusMaterial = goldMat;
  var torus = new THREE.Mesh(torusGeometry, torusMaterial);
  torus.scale.x = scaleX;

  lanternRings = new THREE.Group();

  var torusNum = 9;

  for (i = 1; i < torusNum; i++) {

    var torusCopy = torus.clone();
    torusCopy.rotation.y = 2 * Math.PI * i / torusNum;
    lanternRings.add(torusCopy);

  }

  lanternRings.add(ringTop, handleTop);

  var ratio = window.innerWidth / window.innerHeight;
  if (ratio > 2) ratio = 4;else
  ratio = 2.75;

  var haloMesh = new THREE.Mesh(sphereGeometry, haloMat);
  haloMesh.scale.set(ratio * 1.05, ratio, ratio);

  scene.add(lanternSphere, lanternRings, haloMesh);

}

function createCollisionMesh() {

  collisionMesh = new THREE.Mesh(
  new THREE..........完整代码请登录后点击上方下载按钮下载查看