# 111 three.js下雨进阶版，面只旋转y轴朝向相机

07/23 12:34

## 第一步，创建一个包围盒，来设置范围

``````      const box = new THREE.Box3(
new THREE.Vector3(-2000, -2000, -2000),
new THREE.Vector3(2000, 2000, 2000)
);
``````

``````      material = new THREE.MeshBasicMaterial({
transparent: true,
opacity:.8,
depthWrite: false,
});

material.onBeforeCompile = function (shader, renderer) {
const getFoot = `
uniform float top;
uniform float bottom;
uniform float time;
#include <common>
float angle(float x, float y){
return atan(y, x);
}
vec2 getFoot(vec2 camera,vec2 normal,vec2 pos){
vec2 position;

float distanceLen = distance(pos, normal);

float a = angle(camera.x - normal.x, camera.y - normal.y);

if(pos.x > normal.x){
a -= 0.785;
}
else{
a += 0.785;
}

position.x = cos(a) * distanceLen;
position.y = sin(a) * distanceLen;

return position + normal;
}
`;
const begin_vertex = `
vec2 foot = getFoot(vec2(cameraPosition.x, cameraPosition.z),  vec2(normal.x, normal.z), vec2(position.x, position.z));
float height = top-bottom;
float y = normal.y - bottom - height*time;
if(y < 0.0) y += height;
float ratio = (1.0 - y /height) * (1.0 - y /height);
y = height * (1.0 - ratio);
y += bottom;
y += position.y - normal.y;
vec3 transformed = vec3( foot.x, y, foot.y );
// vec3 transformed = vec3( position );
`;
"#include <common>",
getFoot
);
"#include <begin_vertex>",
begin_vertex
);

value: new THREE.Vector3(0, 200, 0),
};
value: 2000,
};
value: -2000,
};
value: 0,
};
};

``````

## 第三步，通过包围盒生成相应的渲染数据

``````      var geometry = new THREE.BufferGeometry();

const vertices = [];
const normals = [];
const uvs = [];
const indices = [];

for (let i = 0; i < 1000; i++) {
const pos = new THREE.Vector3();
pos.x = Math.random() * (box.max.x - box.min.x) + box.min.x;
pos.y = Math.random() * (box.max.y - box.min.y) + box.min.y;
pos.z = Math.random() * (box.max.z - box.min.z) + box.min.z;

const height = (box.max.y - box.min.y) / 15;
const width = height / 50;

vertices.push(
pos.x + width,
pos.y + height / 2,
pos.z,
pos.x - width,
pos.y + height / 2,
pos.z,
pos.x - width,
pos.y - height / 2,
pos.z,
pos.x + width,
pos.y - height / 2,
pos.z
);

normals.push(
pos.x,
pos.y,
pos.z,
pos.x,
pos.y,
pos.z,
pos.x,
pos.y,
pos.z,
pos.x,
pos.y,
pos.z
);

uvs.push(1, 1, 0, 1, 0, 0, 1, 0);

indices.push(
i * 4 + 0,
i * 4 + 1,
i * 4 + 2,
i * 4 + 0,
i * 4 + 2,
i * 4 + 3
);
}

"position",
new THREE.BufferAttribute(new Float32Array(vertices), 3)
);
"normal",
new THREE.BufferAttribute(new Float32Array(normals), 3)
);
"uv",
new THREE.BufferAttribute(new Float32Array(uvs), 2)
);
geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indices), 1));
``````

## 第四步，在帧更新内，更新材质的uniform

``````    var time = 0;
function render() {
time = (time + clock.getDelta() * 0.2) % 1;

// console.log(time);

material.cameraPosition = camera.position;

if (material.uniforms) {
material.uniforms.cameraPosition.value = camera.position;
material.uniforms.time.value = time;
}

renderer.render(scene, camera);
}
``````

``````
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0;
height: 100%;
}
</style>
<body></body>
<script src="../node_modules/three/build/three.js"></script>
<script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>
<script src="../node_modules/three/examples/js/libs/dat.gui.min.js"></script>
<script>
var camera, scene, renderer, stats, control, material;

var sphere;

var clock = new THREE.Clock();

init();
animate();

function init() {
camera = new THREE.PerspectiveCamera(
40,
window.innerWidth / window.innerHeight,
1,
15000
);
camera.position.z = 3000;

scene = new THREE.Scene();
scene.background = new THREE.Color(0x333333);

const box = new THREE.Box3(
new THREE.Vector3(-2000, -2000, -2000),
new THREE.Vector3(2000, 2000, 2000)
);

material = new THREE.MeshBasicMaterial({
transparent: true,
opacity:.8,
depthWrite: false,
});

material.onBeforeCompile = function (shader, renderer) {
const getFoot = `
uniform float top;
uniform float bottom;
uniform float time;
#include <common>
float angle(float x, float y){
return atan(y, x);
}
vec2 getFoot(vec2 camera,vec2 normal,vec2 pos){
vec2 position;

float distanceLen = distance(pos, normal);

float a = angle(camera.x - normal.x, camera.y - normal.y);

if(pos.x > normal.x){
a -= 0.785;
}
else{
a += 0.785;
}

position.x = cos(a) * distanceLen;
position.y = sin(a) * distanceLen;

return position + normal;
}
`;
const begin_vertex = `
vec2 foot = getFoot(vec2(cameraPosition.x, cameraPosition.z),  vec2(normal.x, normal.z), vec2(position.x, position.z));
float height = top-bottom;
float y = normal.y - bottom - height*time;
if(y < 0.0) y += height;
float ratio = (1.0 - y /height) * (1.0 - y /height);
y = height * (1.0 - ratio);
y += bottom;
y += position.y - normal.y;
vec3 transformed = vec3( foot.x, y, foot.y );
// vec3 transformed = vec3( position );
`;
"#include <common>",
getFoot
);
"#include <begin_vertex>",
begin_vertex
);

value: new THREE.Vector3(0, 200, 0),
};
value: 2000,
};
value: -2000,
};
value: 0,
};
};

var geometry = new THREE.BufferGeometry();

const vertices = [];
const normals = [];
const uvs = [];
const indices = [];

for (let i = 0; i < 1000; i++) {
const pos = new THREE.Vector3();
pos.x = Math.random() * (box.max.x - box.min.x) + box.min.x;
pos.y = Math.random() * (box.max.y - box.min.y) + box.min.y;
pos.z = Math.random() * (box.max.z - box.min.z) + box.min.z;

const height = (box.max.y - box.min.y) / 15;
const width = height / 50;

vertices.push(
pos.x + width,
pos.y + height / 2,
pos.z,
pos.x - width,
pos.y + height / 2,
pos.z,
pos.x - width,
pos.y - height / 2,
pos.z,
pos.x + width,
pos.y - height / 2,
pos.z
);

normals.push(
pos.x,
pos.y,
pos.z,
pos.x,
pos.y,
pos.z,
pos.x,
pos.y,
pos.z,
pos.x,
pos.y,
pos.z
);

uvs.push(1, 1, 0, 1, 0, 0, 1, 0);

indices.push(
i * 4 + 0,
i * 4 + 1,
i * 4 + 2,
i * 4 + 0,
i * 4 + 2,
i * 4 + 3
);
}

"position",
new THREE.BufferAttribute(new Float32Array(vertices), 3)
);
"normal",
new THREE.BufferAttribute(new Float32Array(normals), 3)
);
"uv",
new THREE.BufferAttribute(new Float32Array(uvs), 2)
);
geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indices), 1));

var axesHelper = new THREE.AxesHelper(500);

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

stats = new Stats();
document.body.appendChild(stats.dom);

control = new THREE.OrbitControls(camera, renderer.domElement);

}

function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);
}

//

function animate() {
requestAnimationFrame(animate);

render();
stats.update();
}

var time = 0;
function render() {
time = (time + clock.getDelta() * 0.2) % 1;

// console.log(time);

material.cameraPosition = camera.position;

if (material.uniforms) {
material.uniforms.cameraPosition.value = camera.position;
material.uniforms.time.value = time;
}

renderer.render(scene, camera);
}
</script>
</html>

``````

1
0 收藏

0 评论
0 收藏
1