HTML5+Three.js+WebGL实现鼠标响应式悬浮3D泡沫和方块特效源码.zip资源-CSDN文库

共6个文件

js：4个

jpg：1个

html：1个

版权申诉

167 浏览量 2022-11-03 23:52:31 上传评论收藏 213KB ZIP 举报

HTML5是一种先进的网页开发语言，它极大地扩展了Web应用程序的功能，允许开发者创建更富交互性的网页。HTML5的出现标志着互联网技术的一个重要里程碑，它的核心优势在于提供了更好的媒体支持、离线存储、拖放功能以及对图形和动画的增强处理。在本项目中，“HTML5+Three.js+WebGL实现鼠标响应式悬浮3D泡沫和方块特效源码.zip”利用了HTML5的Canvas元素，这是一个强大的图形绘制平台，通过JavaScript可以直接在浏览器上进行2D和3D图形渲染。Canvas提供了一组API，使得开发者可以动态地生成图形，而不必依赖于外部插件。 Three.js是基于WebGL的3D库，WebGL是一种JavaScript API，用于在任何兼容的Web浏览器中进行硬件加速的3D图形渲染。由于WebGL的使用门槛较高，Three.js这样的库应运而生，它简化了WebGL的编程，让开发者能够更容易地创建复杂的3D场景和动画。在本源码中，Three.js被用来创建3D泡沫和方块的模型。这些3D对象可以在网页上实时渲染，随着鼠标的移动而产生响应式的悬浮效果。这通常涉及到计算物体的位置、旋转和缩放，以及与用户的交互，如鼠标点击或悬停事件。泡沫和方块的3D效果可能涉及以下技术： 1. **几何体创建**：Three.js提供多种预定义的几何体，如BoxGeometry（立方体）和SphereGeometry（球体），可以用于创建泡沫和方块的基本形状。 2. **材质和纹理**：3D对象的外观可以通过Material来设置，包括颜色、光泽、透明度等。可以添加纹理图像来增加视觉细节，使3D物体看起来更真实。 3. **光照**：光源对于3D场景至关重要，可以使用PointLight、DirectionalLight等类型来模拟不同的照明效果，改变3D物体表面的阴影和高光。 4. **动画和交互**：使用THREE.Animation或THREE.Object3D的动画方法来控制3D对象的运动。同时，通过监听鼠标事件，可以实现物体随鼠标移动而改变位置或旋转。 5. **渲染循环**：Three.js的Renderer会持续不断地更新和绘制场景，通过requestAnimationFrame确保平滑的动画效果。 6. **场景构建**：所有3D对象都被包含在一个Scene中，Camera用于设定观察者视角，通过组合这些元素，可以构建出一个完整的3D世界。这个项目结合HTML5的Canvas、Three.js库和WebGL技术，实现了互动式的3D网页效果，为用户带来了丰富的视觉体验。通过深入研究这个源码，开发者可以学习到如何运用这些技术来创建自己的3D网页应用。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5+Three.js+WebGL实现鼠标响应式悬浮3D泡沫和方块特效源码.zip （6个子文件）

132686865395850219

img

skybox.jpg 108KB

index.html 8KB

three.r73.js 421KB

OrbitControls.js 14KB

THREEx.WindowResize.js 1KB

Stats.js 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5 Three.js WebGL 悬浮的3D泡沫和方块</title> <style> body { margin: 0; } </style> </head> <body> <script src="js/three.r73.js"></script>  <script type="application/x-glsl" id="sky-vertex"> varying vec2 vUV; void main() { vUV = uv; vec4 pos = vec4(position, 1.0); gl_Position = projectionMatrix * modelViewMatrix * pos; } </script> <script type="application/x-glsl" id="sky-fragment"> uniform sampler2D texture; varying vec2 vUV; void main() { vec4 sample = texture2D(texture, vUV); gl_FragColor = vec4(sample.xyz, sample.w); } </script>   <script type="x-shader/x-vertex" id="bubble-vertex"> uniform float mRefractionRatio; uniform float mBias; uniform float mScale; uniform float mPower; varying vec3 vReflect; varying vec3 vRefract[3]; varying float vReflectionFactor; void main() { vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal ); vec3 I = worldPosition.xyz - cameraPosition; vReflect = reflect( I, worldNormal ); vRefract[0] = refract( normalize( I ), worldNormal, mRefractionRatio ); vRefract[1] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.99 ); vRefract[2] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.98 ); vReflectionFactor = mBias + mScale * pow( 1.0 + dot( normalize( I ), worldNormal ), mPower ); gl_Position = projectionMatrix * mvPosition; } </script> <script type="x-shader/x-fragment" id="bubble-fragment"> uniform samplerCube tCube; varying vec3 vReflect; varying vec3 vRefract[3]; varying float vReflectionFactor; void main() { vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) ); vec4 refractedColor = vec4( 1.0 ); refractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r; refractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g; refractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b; gl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) ); } </script>  <script src="js/THREEx.WindowResize.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/Stats.js"></script> <script> var soap = { scene: null, camera: null, renderer: null, container: null, controls: null, clock: null, stats: null, bSphere: null, bSphereCamera: null, init: function() { // Initialization // create main scene this.scene = new THREE.Scene(); var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; // prepare camera var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 1000; this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); this.scene.add(this.camera); this.camera.position.set(0, 0, 300); this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // prepare renderer this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); this.renderer.setClearColor(0xffffff); this.renderer.shadowMapEnabled = true; this.renderer.shadowMapSoft = true; // prepare container this.container = document.createElement('div'); document.body.appendChild(this.container); this.container.appendChild(this.renderer.domElement); // events THREEx.WindowResize(this.renderer, this.camera); // prepare controls (OrbitControls) this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement); this.controls.target = new THREE.Vector3(0, 0, 0); this.controls.maxDistance = 700; // prepare clock this.clock = new THREE.Clock(); // prepare stats this.stats = new Stats(); this.stats.domElement.style.position = 'absolute'; this.stats.domElement.style.left = '50px'; this.stats.domElement.style.bottom = '50px'; this.stats.domElement.style.zIndex = 1; this.container.appendChild(this.stats.domElement); // add point light var spLight = new THREE.PointLight(0xffffff, 1.75, 1000); spLight.position.set(-100, 200, 200); this.scene.add(spLight); // add simple cube var cube = new THREE.Mesh(new THREE.CubeGeometry(40, 10, 40), new THREE.MeshLambertMaterial({ color: 0xff0000 * Math.random() })); cube.position.set(75, 0, 0); this.scene.add(cube); // add spherical skybox this.drawSphericalSkybox(); // add bubble object this.drawBubbleObject(); }, drawSphericalSkybox: function() { // prepare ShaderMaterial var uniforms = { texture: { type: 't', value: THREE.ImageUtils.loadTexture('img/skybox.jpg') } }; var skyMaterial = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: document.getElementById('sky-vertex').textContent, fragmentShader: document.getElementById('sky-fragment').textContent }); // create Mesh with sphere geometry and add to the scene var skyBox = new THREE.Mesh(new THREE.SphereGeometry(250, 160, 40), skyMaterial); skyBox.scale.set(-1, 1, 1); skyBox.eulerOrder = 'XZY'; skyBox.renderDepth = 500.0; this.scene.add(skyBox); }, drawBubbleObject: function() { // create additional camera this.bSphereCamera = new THREE.CubeCamera(0.1, 1000, 1000); this.scene.add(this.bSphereCamera); // prepare custom ShaderMaterial var uniforms = { "mRefractionRatio": { type: "f", value: 1.02 }, "mBias": { type: "f", value: 0.1 }, "mPower": { type: "f", value: 2.0 }, "mScale": { type: "f", value: 1.0 }, "tCube": { type: "t", value: this.bSphereCamera.renderTarget } // textureCube } }; // create custom material for the shader var customMaterial = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: document.getElementById('bubble-vertex').textContent, fragmentShader: document.getElementById('bubble-fragment').textContent }); // create spherical mesh this.bSphere = new THREE.Mesh(new THREE.SphereGeometry(50, 32, 32), customMaterial); this.bSphere.position.set(-75, 0, 0); this.scene.add(this.bSphere); this.bSphereCamera.position = this.bSphere.position; } }; // Animate the scene function animate() { requestAnimationFrame(animate); render(); update(); } // Update controls and stats function update() { soap.controls.update(soap.clock.getDelta()); soap.stats.update(); } // Render the scene function render() {

评论收藏

内容反馈

版权申诉