<!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 彩虹粒子组成的球体动画</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div id="fs-container"></div>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="x-shader/x-vertex" id="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 / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying vec3 vColor;
void main() {
gl_FragColor = vec4( color * vColor, 1.0 );
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
</script>
<script src="js/three.min.js"></script>
<script>
(function() {
var CAMERA_Z = 550;
var viewWidth;
var viewHeight;
var scene;
var camera;
var sceneOrtho;
var cameraOrtho;
var renderer;
var orbitControls;
var mapTexture;
var attributes;
var texture;
var uniforms;
var geometry;
var bufferGeometry;
var shaderMaterial;
var pointsMaterial;
var pointCloud;
var particles;
var events;
var radius;
var color = 0xff0000;
viewWidth = window.innerWidth;
viewHeight = window.innerHeight;
scene = new THREE.Scene();
sceneOrtho = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, viewWidth / viewHeight, 1, 500000);
camera.position.set(0, 0, CAMERA_Z);
camera.lookAt(scene.position);
cameraOrtho = new THREE.OrthographicCamera(-viewWidth / 2, viewWidth / 2, viewHeight / 2, -viewHeight / 2, 1, 1000);
cameraOrtho.position.z = 10;
cameraOrtho.lookAt(sceneOrtho.position);
renderer = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(viewWidth, viewHeight);
renderer.autoClear = false; //auto clear after every frame to preserve drawing capabilities
$(renderer.domElement).addClass("content-threejs").prependTo('#fs-container');
//set directional lighting
var directionalLighting = new THREE.DirectionalLight(0xffffff, .5);
directionalLighting.position.set(0, 0, 1000);
scene.add(directionalLighting);
//set hemisphere light
var hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
hemisphereLight.position.set(0, 0, 1000);
scene.add(hemisphereLight);
//add containers to scene
container = new THREE.Object3D();
scene.add(container);
texture = makeTexture();
texture.needsUpdate = true;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
attributes = {
alpha: {
type: 'f',
value: []
},
customColor: {
type: 'c',
value: []
},
size: {
type: 'f',
value: []
}
};
uniforms = {
color: {
type: "c",
value: new THREE.Color(0xfffffff)
},
texture: {
type: "t",
value: texture
}
};
shaderMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexshader').textContent,
fragmentShader: document.getElementById('fragmentshader').textContent,
blending: THREE.AdditiveBlending,
transparent: true,
// fog: false,
depthTest: false,
// depthWrite: false
});
radius = 100;
bufferGeometry = new THREE.BufferGeometry();
particles = 500;
var positions = new Float32Array(particles * 3);
var colors = new Float32Array(particles * 3);
var sizes = new Float32Array(particles);
var color = new THREE.Color();
for (var i = 0, i3 = 0; i < particles; i++, i3 += 3) {
var x = -1 + Math.random() * 2;
var y = -1 + Math.random() * 2;
var z = -1 + Math.random() * 2;
var d = 1 / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2));
x *= d;
y *= d;
z *= d;
positions[i3 + 0] = (x * radius);
positions[i3 + 1] = (y * radius);
positions[i3 + 2] = (z * radius);
color.setHSL(i / particles, 1.0, 0.5);
colors[i3 + 0] = color.r;
colors[i3 + 1] = color.g;
colors[i3 + 2] = color.b;
sizes[i] = 20;
}
bufferGeometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
bufferGeometry.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));
bufferGeometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));
bufferGeometry.attributes.position.dynamic = true;
pointCloud = new THREE.Points(bufferGeometry, shaderMaterial);
pointCloud.position.x = 0;
pointCloud.position.y = 0;
pointCloud.position.z = 150;
container.add(pointCloud);
render();
function render() {
renderer.setClearColor(0x212122);
renderer.clear(0x212122);
renderer.render(scene, camera);
renderer.clearDepth();
var time = Date.now() * 0.005;
pointCloud.rotation.x += 0.005;
pointCloud.rotation.y += 0.005;
pointCloud.rotation.z += 0.005;
requestAnimationFrame(render);
renderer.render(sceneOrtho, cameraOrtho);
}
function makeTexture() {
var canvas = document.createElement('canvas');
var size = 100;
canvas.width = size;
canvas.height = size;
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(0.9, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
return new THREE.Texture(canvas);
}
})();
</script>
</body>
</html>
HTML5+Three.js WebGL实现彩虹粒子组成的球体动画特效源码.zip
版权申诉
161 浏览量
2022-11-03
23:52:09
上传
评论
收藏 133KB ZIP 举报
HTML5+Three.js WebGL实现彩虹粒子组成的球体动画特效源码.zip （3个子文件） 
132686869275358990 
index.html 7KB js 
jquery-1.11.1.min.js 94KB three.min.js 421KB资源评论
毕业_设计
- 粉丝: 1930
- 资源: 1万+
最新资源
- 基于opencv的dnn模块实现Yolo-Fastest的目标检测python源码+模型+说明（高分项目）.zip
- 使用Python调用微信本地ocr服务.zip
- 【精品推荐】人工智能在医疗中的应用.pptx
- 【精品推荐】电子医疗仪器人机接口-(1).ppt
- 【精品推荐】电子医疗仪器人机接口.ppt
- ubuntu镜像ubuntu镜像01
- 基于paddle搭建神经网络实现5种水果识别分类python源码+数据集（高分毕设）.zip
- 【精品推荐】电子商务网店类型介绍.ppt
- 基于paddle搭建神经网络实现水果识别分类python源码+数据集（高分项目）.zip
- 三菱plc编程口通信学习笔记.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
