three打造3d三位灯笼
代码语言: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..........完整代码请登录后点击上方下载按钮下载查看
网友评论0