threejs实现液体管道流动的动态效果
实现点：添加纹理、设置纹理的偏移、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>eg18-2: Three.js 旋转的盒子(重构)--加入阴影</title>
<script src="../js/three.js"></script>
<script src="../js/WebGL.js"></script>
<script src="../js/OrbitControls.js"></script>
</head>
<script>
var renderer = null;
//初始化渲染器
function initThree() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
var camera = null;
// 照像机设置
function initCamera() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(10, 10, 10);
camera.lookAt(new THREE.Vector3(0, 2, 0))
}
var scene = null;
// 场景设置
function initScene() {
scene = new THREE.Scene();
var axes = new THREE.AxisHelper(1000)
scene.add(axes)
}
// 灯光设置
function initLight() {
//add
//环境光
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
//点光
var pointLight = new THREE.PointLight(0xffffff, 0.8, 18);
pointLight.position.set(0, 2, 0);
// scene.add(pointLight);
}
var mesh = null;
// 几何体（物体）设置
function initObject() {
// var geometry = new THREE.CubeGeometry(1,1,1);
// var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
// mesh = new THREE.Mesh(geometry, material);
// mesh.position.y+=1;
// scene.add(mesh);
// meshfloor=new THREE.Mesh(
// new THREE.PlaneGeometry(10,10,10,10),
// new THREE.MeshPhongMaterial({color:0xffffff,wireframe:false,side: THREE.DoubleSide})
// )
// meshfloor.rotation.x -=Math.PI/2;
// scene.add(meshfloor);
//Create a closed wavey loop
// 创建曲线路径
// var curve = new THREE.CatmullRomCurve3([
// new THREE.Vector3(-10, 0, 10),
// new THREE.Vector3(-5, 5, 5),
// new THREE.Vector3(0, 0, 0),
// new THREE.Vector3(5, -5, 5),
// new THREE.Vector3(10, 0, 10),
// new THREE.Vector3(10, 0, 10)
// ]);
// var points = curve.getPoints(50);
// var geometry = new THREE.BufferGeometry().setFromPoints(points);
// var material = new THREE.LineBasicMaterial({ color: 0xff0000 });
// // Create the final object to add to the scene
// var curveObject = new THREE.Line(geometry, material);
// scene.add(curveObject)
}
// 开始渲染
function render() {
requestAnimationFrame(render);
// mesh.rotation.x += 0.1;
// mesh.rotation.y += 0.1;
renderer.render(scene, camera);
}
function threeStart() {
initThree(); // 初始化渲染器
initCamera(); // 照像机设置
initScene(); // 场景设置
initLight(); // 灯光设置
initObject(); // 几何体（物体）设置
render(); // 开始渲染
createTube();
var controls = new THREE.OrbitControls(camera);
}
function start() {
if (WEBGL.isWebGLAvailable()) {
// Initiate function or other initializations here
threeStart();
} else {
var warning = WEBGL.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
}
// 此部分为了展示为hardcode
const pathArr = [
// 4624.99, 2329.38, -5843.11,
// 4624.99, 4643.14, -5843.11,
// 1437.47, 4643.14, -5819.36,
// 1413.69, 4643.14, -1854.40,
// -6983.28, 4643.14, -1854.04,
// -7078.43, 4643.14, 2149.46
-10, 0, 10,
-5, 5, 5,
0, 0, 0,
5, -5, 5,
10, 0, 10,
10, 10, 0
]
const radius = 0.5;
// 动态创建一个管道
function createTube() {
let curveArr = []
// 三个一组取出curve数据
for(let i=0; i < pathArr.length; i+=3) {
curveArr.push(new THREE.Vector3(pathArr[i], pathArr[i+1], pathArr[i+2]))
}
var curve = new THREE.CatmullRomCurve3(curveArr);
/**
* TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
*/
var tubeGeometry = new THREE.TubeGeometry(curve, 100, radius, 50, false);
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('data:application/octet-stream;base64,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');
// 设置阵列模式 RepeatWrapping
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping
// 设置x方向的重复数(沿着管道路径方向)
// 设置y方向的重复数(环绕管道方向)
texture.repeat.x = 10;
texture.repeat.y = 4;
// 设置管道纹理偏移数,便于对中
texture.offset.y = 0.9;
var tubeMaterial = new THREE.MeshPhongMaterial({
map: texture,
transparent: true,
});
var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
// 使用加减法可以设置不同的运动方向
setInterval(() => {
texture.offset.x -= 0.003
})
// return tube
scene.add(tube)
}
</script>
<body onload="start();">
<div id="container"></div>
</body>
</html>