Three.js 绘制空心圆柱管

Hello Dam

已于 2024-01-31 13:34:08 修改

阅读量620

点赞数 3

分类专栏：前端开发文章标签： three.js

于 2021-08-12 21:57:29 首次发布

本文链接：https://blog.csdn.net/laodanqiu/article/details/119654801

版权

前端开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <script src="../resources/js/three.js"></script>
    <script src="../resources/js/OrbitControls.js"></script>
</head>

<body>
<script>
    let scene = new THREE.Scene();

    let bigCircle = new THREE.Shape();
    bigCircle.moveTo(0, 0);

    //大圆
    bigCircle.arc(0, 0, 20, 0, Math.PI * 2);
    //小圆
    let smallCircle = new THREE.Shape();
    smallCircle.arc(0, 0, 10, 0, Math.PI * 2);
    //挖空
    bigCircle.holes.push(smallCircle);

    let tube = new THREE.ExtrudeGeometry(bigCircle, {
        amount: 300,
        bevelEnabled: false,
        curveSegments: 100,
        steps: 100
    });

    let material = new THREE.MeshLambertMaterial({
        color: new THREE.Color("#fc0101")
    });

    let mesh = new THREE.Mesh(tube, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中


    //环境光
    let ambient = new THREE.AmbientLight(0x444444);
    ambient.intensity=2;
    scene.add(ambient);
    let width = window.innerWidth; //窗口宽度
    let height = window.innerHeight; //窗口高度
    let k = width / height; //窗口宽高比
    let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象（正射投影相机）
    let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)，拍照方向
    let renderer = new THREE.WebGLRenderer({
        //抗锯齿
        antialias: true,
        alpha: true
    });
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);

    //控制视野运动
    function render() {
        renderer.render(scene, camera);//执行渲染操作
    }

    render();
    let controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
    controls.addEventListener('change', render);//监听鼠标、键盘事件
</script>
</body>
</html>

效果图如下：