赣州网站设计较好的公司,页面设计报价,做宠物的网站,架设网站flash不显示使用Three.js创建炫酷的3D玻璃质感动态效果
在本教程中#xff0c;我们将学习如何使用Three.js创建具有七彩反射光效果的3D玻璃质感动态效果。这种效果模拟了阳光照射在玻璃棱镜上产生的彩虹效果#xff0c;非常适合用于创意网站的背景、产品展示或艺术作品。 这里写目录标…使用Three.js创建炫酷的3D玻璃质感动态效果
在本教程中我们将学习如何使用Three.js创建具有七彩反射光效果的3D玻璃质感动态效果。这种效果模拟了阳光照射在玻璃棱镜上产生的彩虹效果非常适合用于创意网站的背景、产品展示或艺术作品。 这里写目录标题 使用Three.js创建炫酷的3D玻璃质感动态效果效果预览技术要点前置知识步骤一创建基本HTML结构步骤二添加CSS样式步骤三初始化Three.js场景步骤四添加光源步骤五创建七彩光源步骤六创建玻璃质感对象步骤七添加后期处理效果步骤八添加交互控制步骤九实现动画效果效果优化技巧常见问题解决扩展和创意总结参考资源 效果预览
我们将创建一个场景其中包含多个具有玻璃质感的3D几何体它们会随机旋转和浮动并反射七彩光源产生梦幻般的视觉效果。
技术要点
Three.js基础场景设置玻璃材质的物理特性模拟动态光源和七彩反射后期处理效果交互控制
前置知识
基本的HTML、CSS和JavaScript知识Three.js的基础概念场景、相机、渲染器等
步骤一创建基本HTML结构
首先我们需要创建一个基本的HTML文件引入Three.js库和相关依赖
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title3D玻璃质感动态效果/titlelink relstylesheet hrefstyle.css
/head
bodydiv idcontainer/divdiv classinfoh13D玻璃质感/h1p高品质动态效果展示/p/divscript srchttps://cdn.jsdelivr.net/npm/three0.132.2/build/three.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/three0.132.2/examples/js/controls/OrbitControls.js/scriptscript srchttps://cdn.jsdelivr.net/npm/three0.132.2/examples/js/loaders/GLTFLoader.js/scriptscript srchttps://cdn.jsdelivr.net/npm/three0.132.2/examples/js/postprocessing/EffectComposer.js/scriptscript srchttps://cdn.jsdelivr.net/npm/three0.132.2/examples/js/postprocessing/RenderPass.js/scriptscript srchttps://cdn.jsdelivr.net/npm/three0.132.2/examples/js/postprocessing/UnrealBloomPass.js/scriptscript srchttps://cdn.jsdelivr.net/npm/three0.132.2/examples/js/shaders/CopyShader.js/scriptscript srchttps://cdn.jsdelivr.net/npm/three0.132.2/examples/js/shaders/LuminosityHighPassShader.js/scriptscript srchttps://cdn.jsdelivr.net/npm/three0.132.2/examples/js/postprocessing/ShaderPass.js/scriptscript srcmain.js/script
/body
/html步骤二添加CSS样式
创建一个style.css文件设置页面布局和效果样式
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: Arial, sans-serif;background: linear-gradient(135deg, #1a237e, #0d47a1, #1565c0, #0288d1);color: #fff;overflow: hidden;
}#container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;
}.info {position: absolute;bottom: 30px;left: 30px;z-index: 2;color: rgba(255, 255, 255, 0.9);text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);backdrop-filter: blur(8px);padding: 25px;border-radius: 20px;background: rgba(255, 255, 255, 0.15);border: 1px solid rgba(255, 255, 255, 0.3);box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
}.info h1 {font-size: 2.5rem;margin-bottom: 10px;font-weight: 300;letter-spacing: 1px;
}.info p {font-size: 1.1rem;opacity: 0.9;
}步骤三初始化Three.js场景
在main.js文件中我们首先初始化Three.js场景、相机和渲染器
// 初始化场景、相机和渲染器
let scene, camera, renderer, composer;
let geometry, material, glassMesh;
let clock new THREE.Clock();
let mouseX 0, mouseY 0;
let windowHalfX window.innerWidth / 2;
let windowHalfY window.innerHeight / 2;
let glassPrisms [];
let rainbowLights [];// 初始化场景
init();// 动画循环
animate();function init() {// 创建场景scene new THREE.Scene();scene.background new THREE.Color(0x111827);scene.fog new THREE.Fog(0x111827, 2, 25);// 创建相机camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z 8;// 创建渲染器renderer new THREE.WebGLRenderer({ antialias: true, alpha: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.setPixelRatio(window.devicePixelRatio);renderer.shadowMap.enabled true;renderer.shadowMap.type THREE.PCFSoftShadowMap;renderer.toneMapping THREE.ACESFilmicToneMapping;renderer.toneMappingExposure 1.5;document.getElementById(container).appendChild(renderer.domElement);// 添加事件监听window.addEventListener(resize, onWindowResize);document.addEventListener(mousemove, onDocumentMouseMove);
}步骤四添加光源
接下来我们需要添加多种光源包括环境光、点光源和模拟太阳光的定向光源
// 在init函数中添加以下代码// 添加环境光
const ambientLight new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambientLight);// 添加点光源
const pointLight1 new THREE.PointLight(0x4285F4, 2, 20);
pointLight1.position.set(5, 5, 5);
scene.add(pointLight1);const pointLight2 new THREE.PointLight(0xEA4335, 2, 20);
pointLight2.position.set(-5, -5, 5);
scene.add(pointLight2);const pointLight3 new THREE.PointLight(0xFBBC05, 2, 20);
pointLight3.position.set(-5, 5, -5);
scene.add(pointLight3);const pointLight4 new THREE.PointLight(0x34A853, 2, 20);
pointLight4.position.set(5, -5, -5);
scene.add(pointLight4);// 添加太阳光源 - 模拟强烈的白光
const sunLight new THREE.DirectionalLight(0xffffff, 3);
sunLight.position.set(15, 15, 15);
scene.add(sunLight);步骤五创建七彩光源
为了实现彩虹效果我们需要创建七彩光源
// 添加七彩光源函数
function addRainbowLights() {// 彩虹颜色数组const rainbowColors [0xFF0000, // 红0xFF7F00, // 橙0xFFFF00, // 黄0x00FF00, // 绿0x0000FF, // 蓝0x4B0082, // 靛0x9400D3 // 紫];// 创建七彩光源for (let i 0; i rainbowColors.length; i) {const angle (i / rainbowColors.length) * Math.PI * 2;const radius 12;// 创建彩色聚光灯const spotLight new THREE.SpotLight(rainbowColors[i],5, // 强度30, // 距离Math.PI / 8, // 角度0.5, // 半影1.5 // 衰减);// 设置位置围绕一个圆形分布spotLight.position.set(Math.cos(angle) * radius,Math.sin(angle) * radius,5);// 设置光照方向朝向中心spotLight.target.position.set(0, 0, 0);scene.add(spotLight.target);// 启用阴影spotLight.castShadow true;spotLight.shadow.mapSize.width 1024;spotLight.shadow.mapSize.height 1024;// 添加到场景和数组scene.add(spotLight);rainbowLights.push({light: spotLight,angle: angle,radius: radius,speed: 0.005 Math.random() * 0.01 // 不同的旋转速度});}
}// 在init函数中调用
addRainbowLights();步骤六创建玻璃质感对象
现在我们需要创建具有玻璃质感的3D几何体
function createGlassPrisms() {// 创建多个不同形状的玻璃棱镜const shapes [new THREE.IcosahedronGeometry(1, 0), // 二十面体new THREE.OctahedronGeometry(1, 0), // 八面体new THREE.TetrahedronGeometry(1, 0), // 四面体new THREE.DodecahedronGeometry(1, 0), // 十二面体new THREE.TorusGeometry(0.7, 0.3, 16, 32), // 环状体new THREE.ConeGeometry(0.7, 1.5, 8) // 圆锥体];// 创建玻璃材质const glassMaterial new THREE.MeshPhysicalMaterial({color: 0xffffff,metalness: 0.1,roughness: 0,transmission: 0.99, // 透明度thickness: 0.2, // 厚度envMapIntensity: 2.0, // 环境贴图强度clearcoat: 1.5, // 清漆层clearcoatRoughness: 0.05, // 清漆层粗糙度ior: 2.33, // 折射率接近钻石transparent: true, // 启用透明opacity: 0.6, // 不透明度specularIntensity: 1.0, // 镜面反射强度specularColor: 0xffffff // 镜面反射颜色});// 创建环境贴图const cubeRenderTarget new THREE.WebGLCubeRenderTarget(512);cubeRenderTarget.texture.type THREE.HalfFloatType;const cubeCamera new THREE.CubeCamera(0.1, 100, cubeRenderTarget);scene.add(cubeCamera);glassMaterial.envMap cubeRenderTarget.texture;// 创建多个棱镜并随机放置for (let i 0; i 20; i) {const randomShape shapes[Math.floor(Math.random() * shapes.length)];const prism new THREE.Mesh(randomShape, glassMaterial.clone());// 随机缩放const scale Math.random() * 0.6 0.4;prism.scale.set(scale, scale, scale);// 随机位置prism.position.x (Math.random() - 0.5) * 12;prism.position.y (Math.random() - 0.5) * 12;prism.position.z (Math.random() - 0.5) * 12;// 随机旋转prism.rotation.x Math.random() * Math.PI;prism.rotation.y Math.random() * Math.PI;prism.rotation.z Math.random() * Math.PI;// 启用阴影prism.castShadow true;prism.receiveShadow true;// 添加到场景和数组scene.add(prism);glassPrisms.push({mesh: prism,rotationSpeed: {x: (Math.random() - 0.5) * 0.01,y: (Math.random() - 0.5) * 0.01,z: (Math.random() - 0.5) * 0.01},floatSpeed: (Math.random() - 0.5) * 0.005});}// 更新环境贴图updateEnvironmentMap () {cubeCamera.update(renderer, scene);};
}// 在init函数中调用
createGlassPrisms();步骤七添加后期处理效果
为了增强视觉效果我们添加辉光后期处理效果
function addBloomEffect() {// 创建后期处理效果composer new THREE.EffectComposer(renderer);const renderPass new THREE.RenderPass(scene, camera);composer.addPass(renderPass);// 辉光效果const bloomPass new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1.5, // 辉光强度0.5, // 半径0.3 // 阈值越低越多物体发光);composer.addPass(bloomPass);
}// 在init函数中调用
addBloomEffect();步骤八添加交互控制
添加轨道控制器使用户可以旋转和缩放场景
// 在init函数中添加
// 添加交互控制
const controls new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping true;
controls.dampingFactor 0.05;
controls.enableZoom true;
controls.autoRotate true;
controls.autoRotateSpeed 0.5;步骤九实现动画效果
最后我们需要实现动画效果包括棱镜旋转、浮动以及光源移动
function onWindowResize() {windowHalfX window.innerWidth / 2;windowHalfY window.innerHeight / 2;camera.aspect window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);composer.setSize(window.innerWidth, window.innerHeight);
}function onDocumentMouseMove(event) {mouseX (event.clientX - windowHalfX) * 0.0005;mouseY (event.clientY - windowHalfY) * 0.0005;
}function animate() {requestAnimationFrame(animate);render();
}function render() {const delta clock.getDelta();const time clock.getElapsedTime();// 更新每个棱镜的位置和旋转glassPrisms.forEach(prism {// 旋转prism.mesh.rotation.x prism.rotationSpeed.x;prism.mesh.rotation.y prism.rotationSpeed.y;prism.mesh.rotation.z prism.rotationSpeed.z;// 浮动效果prism.mesh.position.y Math.sin(time * 0.5) * prism.floatSpeed;// 添加一点鼠标互动prism.mesh.rotation.y mouseX * 0.5;prism.mesh.rotation.x mouseY * 0.5;});// 更新彩虹光源位置rainbowLights.forEach(light {// 让光源围绕中心旋转light.angle light.speed;light.light.position.x Math.cos(light.angle) * light.radius;light.light.position.y Math.sin(light.angle) * light.radius;// 脉动效果light.light.intensity 5 Math.sin(time * 2 light.angle) * 2;});// 更新环境贴图if (typeof updateEnvironmentMap function time % 0.5 0.05) {updateEnvironmentMap();}// 使用后期处理渲染器composer.render();
}效果优化技巧 玻璃材质参数调整 增加transmission值可以提高透明度增加ior值可以增强折射效果减小thickness值可以使玻璃看起来更薄更通透 光源效果增强 使用不同颜色的光源可以创造更丰富的视觉效果让光源动态移动可以产生更生动的反射效果 后期处理调整 调整辉光效果的强度和阈值可以改变整体氛围考虑添加其他后期处理效果如色彩校正或景深效果
常见问题解决 性能问题 减少棱镜数量降低环境贴图分辨率减少阴影质量 兼容性问题 检查浏览器是否支持WebGL为不支持WebGL的浏览器提供备用内容
扩展和创意 添加交互 点击棱镜时改变其颜色或大小添加音频可视化效果 集成到实际项目 作为网站背景作为产品展示的一部分作为艺术装置的数字组件
总结
通过以上步骤我们成功创建了一个具有七彩反射光效果的3D玻璃质感动态效果。这种效果不仅视觉上令人印象深刻而且可以根据需要进行自定义和扩展。
希望本教程对你有所帮助如果你有任何问题或想法欢迎分享和讨论。
参考资源
Three.js官方文档WebGL基础知识物理渲染材质详解
