HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！
作品介绍
1.网页作品简介方面 ：3D云效果，叼炸天！可用鼠标控制方向！
2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）
文章目录
- HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！
- 作品介绍
- 一、作品演示
- 二、代码目录
- 三、代码实现
- 四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
- 五、源码获取
- 六、更多HTML期末大作业(成品下载)
- >>>戳我>>>点击进入200例期末大作业作品
一、作品演示
演示地址
二、代码目录
三、代码实现
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Clouds</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #326696;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
a {
color:#0078ff;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/ThreeWebGL.js"></script>
<script type="text/javascript" src="js/ThreeExtras.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script id="vs" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fs" type="x-shader/x-fragment">
uniform sampler2D map;
uniform vec3 fogColor;
uniform float fogNear;
uniform float fogFar;
varying vec2 vUv;
void main() {
float depth = gl_FragCoord.z / gl_FragCoord.w;
float fogFactor = smoothstep( fogNear, fogFar, depth );
gl_FragColor = texture2D( map, vUv );
gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
}
</script>
<script type="text/javascript">
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
// Bg gradient
var canvas = document.createElement( 'canvas' );
canvas.width = 32;
canvas.height = window.innerHeight;
var context = canvas.getContext( '2d' );
var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
gradient.addColorStop(0, "#1e4877");
gradient.addColorStop(0.5, "#4584b4");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
// Clouds
var container;
var camera, scene, renderer, sky, mesh, geometry, material,
i, h, color, colors = [], sprite, size, x, y, z;
var mouseX = 0, mouseY = 0;
var start_time = new Date().getTime();
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 6000;
scene = new THREE.Scene();
geometry = new THREE.Geometry();
var texture = THREE.ImageUtils.loadTexture( 'cloud10.png' );
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
var fog = new THREE.Fog( 0x4584b4, - 100, 3000 );
material = new THREE.MeshShaderMaterial( {
uniforms: {
"map": { type: "t", value:2, texture: texture },
"fogColor" : { type: "c", value: fog.color },
"fogNear" : { type: "f", value: fog.near },
"fogFar" : { type: "f", value: fog.far },
},
vertexShader: document.getElementById( 'vs' ).textContent,
fragmentShader: document.getElementById( 'fs' ).textContent,
depthTest: false
} );
var plane = new THREE.Mesh( new THREE.Plane( 64, 64 ) );
for ( i = 0; i < 8000; i++ ) {
plane.position.x = Math.random() * 1000 - 500;
plane.position.y = - Math.random() * Math.random() * 200 - 15;
plane.position.z = i;
plane.rotation.z = Math.random() * Math.PI;
plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
GeometryUtils.merge( geometry, plane );
}
mesh = new THREE.Mesh( geometry, material );
scene.addObject( mesh );
mesh = new THREE.Mesh( geometry, material );
mesh.position.z = - 8000;
scene.addObject( mesh );
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 0.25;
mouseY = ( event.clientY - windowHalfY ) * 0.15;
}
function onWindowResize( event ) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
position = ( ( new Date().getTime() - start_time ) * 0.03 ) % 8000;
camera.position.x += ( mouseX - camera.target.position.x ) * 0.01;
camera.position.y += ( - mouseY - camera.target.position.y ) * 0.01;
camera.position.z = - position + 8000;
camera.target.position.x = camera.position.x;
camera.target.position.y = camera.position.y;
camera.target.position.z = camera.position.z - 1000;
renderer.render( scene, camera );
}
</script>
</body>
</html>
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
六、更多HTML期末大作业(成品下载)
>>>戳我>>>点击进入200例期末大作业作品
1.❤100款 html+css+JavaScript 表白源码演示地址
2.❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
3. 一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)
4. ❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)
5. ❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)
6. html+css+js生日快乐网站模板 (520/七夕情人节/告白/求婚/生日快乐) 含背景音乐
7. html+css+js生日快乐~程序员专属的生日快乐html模板(含生日背景音乐)
8. ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
9. 我是如何用一行代码表白学妹❤520情人节送女朋友的3D樱花雨相册礼物❤(程序员表白专属)
10. 七夕情人节~html+css+javascript实现满屏爱心特效(程序员表白)
11. 七夕情人节送花告白动画(HTML+CSS+JavaScript)
12. html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
13. html+css+javascript制作爱心表白代码(520/七夕情人节/告白/生日礼物)
14. 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节
15. html+css+javascript实现100款超炫酷告白源码(520/七夕/告白/求婚/脱单)程序员必备
16. html+css+javascript实现520告白爱情树(含音乐)程序员表白必备
17. html+css+javaScript实现炫酷烟花表白(云雾状粒子文字3D开场)
18. 程序员520告白Html+Js+Css花瓣相册网页模板❤程序员表白必备
19. html+css+javascript实现乾坤八卦风水罗盘时钟 (免费附源码)
20. html+css+javascript实现抖音超火罗盘时钟 (免费附源码)
21. 抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表
22. html+css+js绘制冬季下雪3D相册(520情人节/七夕情人节/程序员表白html代码)
23. 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
24. html+css+js制作520表白网页，全屏的爱心和表白语网页动画代码，浪漫的520爱心表白动画特效。
25. 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
26. Html5浪漫结婚请柬婚礼网站模板❤_爱她就给她最美的H5婚礼请柬_(婚庆电子邀请函)含背景音乐
27. html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备
28. 520七夕情人节代码给女朋友送了一个礼物~html+css+javascript实现樱花爱心相册「可以拿去送给自己喜欢的人」
29. 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
30. html+css+javascript生日快乐烟花 ❤520/表白/七夕情人节/求婚❤专用(自定义文字)
31.一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
32.HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
33.送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)
34.HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤
35.《520七夕情人节表白礼物》：虚幻浪漫的爱情故事——❤520表白星空漫漫3D相册❤(HTML+CSS+JavaScript)
36.HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
37.《520七夕情人节表白》：制作属于我们的爱情相册网页(HTML+CSS+JavaScript)
38.师妹直呼“这也太哇塞了吧“ ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
39.❤七夕情人节将至，用HTML+CSS给女朋友绘制一张彩色代码相册吧!
40.❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
41.HTML5+CSS3实现非常有创意的生日蛋糕动画(含音乐)
42.HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
更多推荐
HTML+CSS+JavaScript制作3D云效果,叼炸天！可用鼠标控制方向！
发布评论