一个简单three.js管道的例子

最新推荐文章于 2024-04-26 16:47:03 发布

天一生水water

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量250

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Metal1/article/details/137025353

版权

一个简单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>