使用 Three.js 模拟通过管道的水流答案

【问题标题】：Waterflow simulation through a pipe using Three.js使用 Three.js 模拟通过管道的水流
【发布时间】：2023-04-09 00:07:01
【问题描述】：

我想在我的 React 应用程序中使用 Three.js 模拟流过管道的水流。如下图所示，我想实现三个功能，

画一个管道
基于 % (0-100) 模拟水 - 现在管道中填充了 70% 的水。（用户定义）
使用从左到右移动的箭头动画水流 - （从左到右/从右到左） - 用户定义

我试过的东西不起作用

【问题讨论】：

一个问题的内容太多。我将从第一个开始：画一个空心圆柱体。为此，ExtrudeGeometry 对于带有圆孔的圆形形状，将是一种选择。另一种选择是LatheGeometry。

标签： reactjs three.js

【解决方案1】：

一个空心圆柱体（管道），基于ExtrudeGeometry：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.133.1";
import {
  OrbitControls
} from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let r = 1, R = 1.25;

// pipe
let pipeShape = new THREE.Shape();
pipeShape.absarc(0, 0, R, 0, Math.PI * 2);
pipeShape.holes.push(new THREE.Path().absarc(0, 0, r, 0, Math.PI * 2, true));
let pipeGeometry = new THREE.ExtrudeGeometry(pipeShape, {
    curveSegments: 100,
    depth: 10,
    bevelEnabled: false
});
pipeGeometry.center();
let pipeMaterial = new THREE.MeshLambertMaterial({color: "silver"});
let pipe = new THREE.Mesh(pipeGeometry, pipeMaterial);
scene.add(pipe);


window.addEventListener("resize", onResize);

renderer.setAnimationLoop(_ => {
  renderer.render(scene, camera);
})

function onResize(event) {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
}

</script>

【讨论】：

我可以从一些文档中为流向设置动画。任何关于管内水模拟的想法都会非常有帮助
@Jerry 对于流向，我会使用带箭头的动画纹理。对于水模拟，取决于您的最终目标，但我将从ExtrudeGeometry 开始。您可以创建一个新问题。

【解决方案2】：

与您的场景相比，您的圆柱几何体看起来过大。

观看以下示例： https://codepen.io/freddy-turtle/pen/OJjVmvG?editors=1010

圆柱体以CylinderGeometry = 1,1,3 作为第一个参数出现在整个屏幕中。

【讨论】：

故意删除代码以避免混淆