1. demo效果
2. 實作要點
2.1 創建shader材質
這一步中主要是為了實作樓宇從下到上的掃光，而定制的著色器材質，在著色器材質中書寫頂點著色器和片元著色器，具體如下
let buildingSweepingLightShader = {
uniforms: {
"boxH": {
type: "f",
value: -10.0
}
},
vertexShader: `
varying vec3 vColor;
varying float v_pz;
void main(){
v_pz = position.y;
vColor = color;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform float boxH;
varying vec3 vColor;
varying float v_pz;
float plot(float pct){
return smoothstep(pct-8.0,pct,v_pz) - smoothstep(pct,pct+0.02,v_pz);
}
void main(){
float f1 = plot(boxH);
vec4 b1 = mix(vec4(0.9,0.2,1.0,0.1),vec4(f1,f1,f1,1.0),0.1);
gl_FragColor = mix(vec4(vColor,1.0),b1,f1);
gl_FragColor = vec4(vec3(gl_FragColor),0.9);
}
`
};
const material = new THREE.ShaderMaterial({
uniforms: buildingSweepingLightShader.uniforms,
vertexShader: buildingSweepingLightShader.vertexShader,
fragmentShader: buildingSweepingLightShader.fragmentShader,
vertexColors: buildingSweepingLightShader
})
material.needsUpdate = true2.2 創建模擬樓宇Mesh
這里主要使用上一步創建的著色器材質和使用BoxBufferGeometry創建的幾何體創建Mesh物件，并隨機生成高度模擬樓宇
function initModel() {
//創建60個立方體模擬樓宇
for (let i = 0; i < 60; i++) {
const height = Math.random() * 10 + 2
const width = 3
const cubeGeom = new THREE.BoxBufferGeometry(width, height, width)
cubeGeom.setAttribute('color', new THREE.BufferAttribute(new Float32Array(24 * 3), 3))
const colors = cubeGeom.attributes.color
let r = Math.random() * 0.2,
g = Math.random() * 0.1,
b = Math.random() * 0.8
//設定立方體六個面24個頂點的顏色
for (let i = 0; i < 24; i++) {
colors.setXYZ(i, r, g, 0.6)
}
//重置立方體頂部四邊形的四個頂點的顏色
const k = 2
colors.setXYZ(k * 4 + 0, .0, g, 1.0)
colors.setXYZ(k * 4 + 1, .0, g, 1.0)
colors.setXYZ(k * 4 + 2, .0, g, 1.0)
colors.setXYZ(k * 4 + 3, .0, g, 1.0)
const cube = new THREE.Mesh(cubeGeom, material)
cube.position.set(Math.random() * 100 - 50, height / 2, Math.random() * 100 - 50)
scene.add(cube)
//繪制邊框線
const lineGeom = new THREE.EdgesGeometry(cubeGeom)
const lineMaterial = new THREE.LineBasicMaterial({
color: 0x018BF5,
linewidth: 1,
linecap: 'round',
linejoin: 'round'
})
const line = new THREE.LineSegments(lineGeom, lineMaterial)
line.scale.copy(cube.scale)
line.rotation.copy(cube.rotation)
line.position.copy(cube.position)
scene.add(line)
}
}2.3 render中更新uniform變數
這一步主要是通過著色器材質中的uniform變數boxH向著色器中傳值樓宇中掃光的高度，具體如下
buildingSweepingLightShader.uniforms.boxH.value += 0.1
if (buildingSweepingLightShader.uniforms.boxH.value > 10) {
buildingSweepingLightShader.uniforms.boxH.value = -10
}3. demo代碼
<!DOCTYPE html>
<html>
<head>
<title>Example 12 - buildingSweepingLight</title>
<script type="text/javascript" src="../three/build/three.js"></script>
<script type="text/javascript" src="../three/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript" src="../three/examples/js/libs/stats.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output"></div>
<div id="WebGL-output"></div>
<script type="text/javascript">
let stats, controls;
let camera, scene, renderer;
let buildingSweepingLightShader = {
uniforms: {
"boxH": {
type: "f",
value: -10.0
}
},
vertexShader: `
varying vec3 vColor;
varying float v_pz;
void main(){
v_pz = position.y;
vColor = color;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform float boxH;
varying vec3 vColor;
varying float v_pz;
float plot(float pct){
return smoothstep(pct-8.0,pct,v_pz) - smoothstep(pct,pct+0.02,v_pz);
}
void main(){
float f1 = plot(boxH);
vec4 b1 = mix(vec4(0.9,0.2,1.0,0.1),vec4(f1,f1,f1,1.0),0.1);
gl_FragColor = mix(vec4(vColor,1.0),b1,f1);
gl_FragColor = vec4(vec3(gl_FragColor),0.9);
}
`
};
const material = new THREE.ShaderMaterial({
uniforms: buildingSweepingLightShader.uniforms,
vertexShader: buildingSweepingLightShader.vertexShader,
fragmentShader: buildingSweepingLightShader.fragmentShader,
vertexColors: buildingSweepingLightShader
})
material.needsUpdate = true
function initScene() {
scene = new THREE.Scene();
}
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(30, 40, 80)
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
function initLight() {
//添加環境光
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(5, 10, 20);
spotLight.castShadow = true;
scene.add(spotLight);
}
function initModel() {
//創建60個立方體模擬樓宇
for (let i = 0; i < 60; i++) {
const height = Math.random() * 10 + 2
const width = 3
const cubeGeom = new THREE.BoxBufferGeometry(width, height, width)
cubeGeom.setAttribute('color', new THREE.BufferAttribute(new Float32Array(24 * 3), 3))
const colors = cubeGeom.attributes.color
let r = Math.random() * 0.2,
g = Math.random() * 0.1,
b = Math.random() * 0.8
//設定立方體六個面24個頂點的顏色
for (let i = 0; i < 24; i++) {
colors.setXYZ(i, r, g, 0.6)
}
//重置立方體頂部四邊形的四個頂點的顏色
const k = 2
colors.setXYZ(k * 4 + 0, .0, g, 1.0)
colors.setXYZ(k * 4 + 1, .0, g, 1.0)
colors.setXYZ(k * 4 + 2, .0, g, 1.0)
colors.setXYZ(k * 4 + 3, .0, g, 1.0)
const cube = new THREE.Mesh(cubeGeom, material)
cube.position.set(Math.random() * 100 - 50, height / 2, Math.random() * 100 - 50)
scene.add(cube)
//繪制邊框線
const lineGeom = new THREE.EdgesGeometry(cubeGeom)
const lineMaterial = new THREE.LineBasicMaterial({
color: 0x018BF5,
linewidth: 1,
linecap: 'round',
linejoin: 'round'
})
const line = new THREE.LineSegments(lineGeom, lineMaterial)
line.scale.copy(cube.scale)
line.rotation.copy(cube.rotation)
line.position.copy(cube.position)
scene.add(line)
}
}
function initRender() {
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
})
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0f2d48, 1) // 設定背景顏色
renderer.toneMapping = THREE.ACESFilmicToneMapping;
document.getElementById("WebGL-output").appendChild(renderer.domElement);
}
//初始化軌道控制器
function initControls() {
clock = new THREE.Clock() // 創建THREE.Clock物件，用于計算上次呼叫經過的時間
controls = new THREE.OrbitControls(camera, renderer.domElement)
}
function init() {
initScene();
initCamera();
initLight();
initRender();
initStats();
initControls();
initModel();
render();
}
function updateFun() {
stats.update();
const delta = clock.getDelta() // 獲取自上次呼叫的時間差
controls.update(delta) // 相機更新
buildingSweepingLightShader.uniforms.boxH.value += 0.1
if (buildingSweepingLightShader.uniforms.boxH.value > 10) {
buildingSweepingLightShader.uniforms.boxH.value = -10
}
}
function render() {
updateFun()
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function initStats() {
stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
document.getElementById("Stats-output").appendChild(stats.domElement);
}
window.onload = init;
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293747.html
標籤：其他
下一篇：javascript高級(二)