圣诞节飘雪圣诞树
Posted 编程初体验
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了圣诞节飘雪圣诞树相关的知识，希望对你有一定的参考价值。
一、前言
马上2023年的圣诞节🎄要到了，作为一个程序员，没什么可以送给大家的，就给大家画一个圣诞树🎄，作为礼物来送给大家吧。
二、创意名
明月当空飘雪圣诞树
三、效果展示
四、实现步骤
主要是利用three.js和shader来动态实现飘雪粒子。
五、编码实现
CSS：
body
margin: 0;
JavaScript：
var container;
var camera, scene, renderer;
var uniforms;
init();
animate();
function init()
container = document.getElementById('container');
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
var geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms =
u_time:
type: "f",
value: 1.0
,
u_resolution:
type: "v2",
value: new THREE.Vector2()
,
u_mouse:
type: "v2",
value: new THREE.Vector2()
;
var material = new THREE.ShaderMaterial(
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
);
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener('resize', onWindowResize, false);
document.onmousemove = function(e)
uniforms.u_mouse.value.x = e.pageX
uniforms.u_mouse.value.y = e.pageY
function onWindowResize(event)
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
function animate()
requestAnimationFrame(animate);
render();
function render()
uniforms.u_time.value += 0.05;
renderer.render(scene, camera);
html：
<div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">
void main()
gl_Position = vec4( position, 1.0 );
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
vec3 camUp = vec3(0.0, 1.0, 0.0);
vec3 camDir= vec3(0.0, 0.0, 1.0);
vec3 camPos= vec3(0.0, -0.96, -1.76);
vec3 lightPos= vec3(-2.36, 5.75, -7.3);
#define TAO 6.283
const int MAX_ITER = 100;
float PI=3.14159265;
//--------------------------------------------------
#define time u_time
vec3 getNormal(in vec3 p);
//ОÑвещение
//-------------------------------------------------Ламберт
vec3 getlightingLambert(in vec3 pos, in vec3 normal, in vec3 lightDir, in vec3 color)
// const vec3 diffColor = vec3 ( 0.5, 0.0, 0.0 );
vec3 n2 = normalize ( normal);
vec3 l2 = normalize ( lightDir-pos );
vec3 diff = color * max ( dot ( n2, l2 ), 0.0 );
return diff;
//-------------------------------------------------по Фонгу
vec3 getlightingPhong(in vec3 pos, in vec3 normal, in vec3 lightDir, in vec3 color)
vec3 specColor = vec3(1.0, 0.97, 0.94);
float specPower = 36.0;
vec3 l = normalize (lightDir-pos);
vec3 v = normalize(pos-pos);
vec3 n = normalize (normal);
vec3 r = reflect ( -l, n );
vec3 diff = color * max ( dot ( n, l ), 0.0 );
vec3 spec = specColor * pow ( max ( dot ( l, r ), 0.0 ), specPower );
return diff + spec;
//------------------------------------------
vec2 rot(vec2 p,float r)
vec2 ret;
ret.x=p.x*cos(r)-p.y*sin(r);
ret.y=p.x*sin(r)+p.y*cos(r);
return ret;
//------------------------------------------
vec2 rotsim(vec2 p,float s)
vec2 ret=p;
ret=rot(p,-PI/(s*2.0));
ret=rot(p,floor(atan(ret.x,ret.y)/PI*s)*(PI/s));
return ret;
//------------------------------------------
vec3 sim(vec3 p,float s)
vec3 ret=p;
ret=p+s/2.0;
ret=fract(ret/s)*s-s/2.0;
return ret;
//------------------------------------------------
//Примитивы
//--------------------------------------------------
float trunkCone( vec3 p, float c )
float q = length(p.xz);
return q + p.y * c;
//----------------------------------------------------
vec3 background(vec3 rd)
float sky = max(0.0, -dot(rd, vec3(0.0, 1.0, 0.0)));
float ground = max(0.0, -dot(rd, vec3(0.0, 6.7, 2.0)));
vec3 bFon = pow(ground, 0.5) * vec3(0.4, 0.3, 0.2) + pow(sky, 1.) * vec3(0.4, 0.3, 0.2);
return bFon ;
//--------------------------------------------------
vec3 getmaterial( in vec3 p, in float mat)
vec3 pos = p;
vec3 color = vec3(1.);
vec3 colorObject = vec3(0.5, 0.4, 0.3);
vec3 colorObject1;
if (mat == 0.)
return vec3(0.4662, 0.4565, 0.4488);
else if (mat == 1.)
return vec3(1.0, 1.0, 1.0);
else if (mat == 2.)
float r = pow(colorObject.r, cos(u_time * 0.5));
float g = pow(colorObject.g, cos(u_time * 0.3));
float b = pow(colorObject.b, cos(u_time * 0.7));
colorObject1 = vec3(r, g, b);
return colorObject1;
else if (mat == 3.) // Ñтвол
return vec3(0.7218, 0.4581, 0.0983);
else if (mat == 4.) // иглы
return vec3(0.5, 0.6, 0.2);
else
return vec3(0.3, 0.9,0.5);
//------------------------------------------------
//Объекты
//----------------------------------------------------
vec2 rotate1(vec2 v, float angle)
return cos(angle)*v+sin(angle)*vec2(v.y,-v.x);
vec2 kaleido(vec2 v, float power)
return rotate1(v,floor(.5+atan(v.x,-v.y)*power/TAO)*TAO/power);
vec2 kaleido6(vec2 v)
return rotate1(v,floor(0.5+atan(v.x,-v.y)*0.95493)*1.0472);
vec2 kaleido12(vec2 v)
return rotate1(v,floor(0.5+atan(v.x,-v.y)*1.90986)*0.5236);
mat2 r45=mat2(0.7071,0.7071,-0.7071,0.7071);
mat2 r30=mat2(0.866,0.5,-0.5,0.866);
mat2 rtrn=mat2(0.9689,-0.2474,0.2474,0.9689);
//----------------------------------------------------Ветки ёлки
float branch(in vec3 pos, inout float trunk )
float d = 1.0;
for(int i=0;i<2;i++)
vec3 z=pos;
float c=floor(z.y*4.);
z.yz=rotate1(z.yz,-z.z*0.79*(1.0+c*0.1));
float bm = -z.y - 2.0;
z.y=mod(z.y,0.25)-0.05;
if(i==1)
z.xz=z.xz*rtrn;
z.xz=kaleido(z.xz,2.0-c);
z.yz=rtrn*z.yz;
bm=max(bm,-z.z+c*0.086);
trunk=min(trunk,max(max(abs(z.x),abs(z.y)),bm))-0.001-z.z*0.003;
float c2=floor(z.z * 16.0);
z.z=mod(z.z,0.0625)-0.049;
z.xy=rotate1(z.xy,c2*0.25);
z.xy=kaleido12(z.xy);
z.yz=z.yz*r30;
d=min(d,max(max(max(abs(z.x),abs(z.z)),-z.y-0.05+c*0.005),bm));
return d;
//----------------------------------------------------
vec2 tree(in vec3 pos)
float d=1.;
float material = 0.;
float trunk = trunkCone( pos, 0.025 ); // Ствол
d = branch(pos, trunk ); // Ветки
if(trunk<d)
d=trunk;
material = 3.;
else
material = 4.;
float result = max(0.0,max(d,max(pos.y,-pos.y-2.0)));
return vec2(result, material);
//----------------------------------------------------
//Star
vec2 star(vec3 p)
p.y=p.y - 0.07;
p= p * 10.0;
float l=length(p);
if (l < 2.0)
p.xy=rotsim(p.xy,5.0);
p.y=p.y-2.0;
p.z=abs(p.z);
p.x=abs(p.x);
return vec2(dot(p,normalize(vec3(2.0,1,3.0))) / 10.0, 2.);
else return vec2((l-1.9)/4.0, 2.0);
//----------------------------------------------------
//Snow
float makeshowflake(vec3 p)
return length(p)- 0.02;
//----------------------------------------------------
float makeShow(vec3 p,float tx,float ty,float tz)
p.y=p.y+time*tx;
p.x=p.x+time*ty;
p.z=p.z+time*tz;
p=sim(p,8.0);
return makeshowflake(p);
//----------------------------------------------------
vec2 show(vec3 p)
float f=makeShow(p,1.11, 1.03, 1.382022圣诞代码合集(圣诞树+圣诞老人)