一个简单three.js管道的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 3D Bent Pipe</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script>
// 1. 创建场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;
// 2. 创建管道路径(曲线)
var path = new THREE.CatmullRomCurve3([
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(-0, 1, 0),
new THREE.Vector3(6, 0, 0)
]);
// 3. 创建管道几何体
var tubeGeometry = new THREE.TubeGeometry(path, 64, 1, 16, false);
// 4. 创建材质
var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
// 5. 创建管道网格对象
var tube = new THREE.Mesh(tubeGeometry, material);
// 6. 添加管道到场景
scene.add(tube);
// 7. 设置光照和阴影(可选)
var light = new THREE.PointLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);
// 8. 渲染场景
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
tube.rotation.z += 0.01; // 使管道旋转
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>