前言介绍：
3D特效编辑 播报
人的视觉之所以能分辨远近，是靠两只眼睛的差距。人的两眼分开约5公分，两只眼睛除了瞄准正前方以外，看任何一样东西，两眼的角度都不会相同。虽然差距很小，但经视网膜传到大脑里，脑子就用这微小的差距，产生远近的深度，从而产生立体感。一只眼睛虽然能看到物体，但对物体远近的距离却不易分辨。根据这一原理，如果把同一景像，用两只眼睛视角的差距制造出两个影像，然后让两只眼睛一边一个，各看到自己一边的影像，透过视网膜就可以使大脑产生景深的立体感了。各式各样的立体演示技术，也多是运用这一原理，我们称其为“偏光原理”。
引言：
3D立体电影的制作有多种形式，其中较为广泛采用的是偏光眼镜法。它以人眼观察景物的方法，利用两台并列安置的电影摄影机，分别代表人的左、右眼，同步拍摄出两条略带水平视差的电影画面。放映时，将两条电影影片分别装入左、右电影放映机，并在放映镜头前分别装置两个偏振轴互成90度的偏振镜。两台放映机需同步运转，同时将画面投放在金属银幕上，形成左像右像双影。当观众戴上特制的偏光眼镜时，由于左、右两片偏光镜的偏振轴互相垂直，并与放映镜头前的偏振轴相一致；致使观众的左眼只能看到左像、右眼只能看到右像，通过双眼汇聚功能将左、右像叠和在视网膜上，由大脑神经产生三维立体的视觉效果。展现出一幅幅连贯的立体画面，使观众感到景物扑面而来、或进入银幕深凹处，能产生强烈的“身临其境”感。
13MB动态图片
主要技术和工具：
html+css
功能截图：
浪漫，特效
部分代码
function addPlane(scene, uniforms, totalPoints) { const vertexShader = ` attribute float size; attribute vec3 customColor; varying vec3 vColor; void main() { vColor = customColor; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_PointSize = size * ( 300.0 / -mvPosition.z ); gl_Position = projectionMatrix * mvPosition; } `; const fragmentShader = ` uniform vec3 color; uniform sampler2D pointTexture; varying vec3 vColor; void main() { gl_FragColor = vec4( vColor, 1.0 ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); } `; const shaderMaterial = new THREE.ShaderMaterial({ uniforms: { ...uniforms, pointTexture: { value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) } }, vertexShader, fragmentShader, blending: THREE.AdditiveBlending, depthTest: false, transparent: true, vertexColors: true }); const geometry = new THREE.BufferGeometry(); const positions = []; const colors = []; const sizes = []; const color = new THREE.Color(); for (let i = 0; i < totalPoints; i++) { const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)]; positions.push(x); positions.push(y); positions.push(z); color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"])); colors.push(color.r, color.g, color.b); sizes.push(1); } geometry.setAttribute( "position", new THREE.Float32BufferAttribute(positions, 3).setUsage( THREE.DynamicDrawUsage)); geometry.setAttribute( "customColor", new THREE.Float32BufferAttribute(colors, 3)); geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1)); const plane = new THREE.Points(geometry, shaderMaterial); plane.position.y = -8; scene.add(plane); } function addListners(camera, renderer, composer) { document.addEventListener("keydown", e => { const { x, y, z } = camera.position; console.log(`camera.position.set(${x},${y},${z})`); const { x: a, y: b, z: c } = camera.rotation; console.log(`camera.rotation.set(${a},${b},${c})`); }); window.addEventListener( "resize", () => { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); composer.setSize(width, height); }, false); //脱离文档流显示文字元素 const floatText = document.createElement('h2'); floatText.innerHTML = 'Merry Christmas to My Girl !'; floatText.classList.add('animate__animated'); //动画默认加 floatText.classList.add('animate__fadeInDown'); //动画效果 floatText.classList.add('animate__delay-2s'); //动画延迟时间 floatText.classList.add('text'); document.body.appendChild(floatText); }
项目结构
