web3D之常见几何体

作者: suc浮生 | 来源:发表于2020-04-15 21:55 被阅读0次

    常用几何体概念

    所有几何体的基类分为Geometry和BufferGeometry两大类,两类几何体直接可以相互转化。
    注:以下所有示例材质(材质的具体概念下次再讲)选用均建议用如下:

    //第一个参数是几何体颜色  第二个为网格 线框展示 图形容易观察
    const material = new THREE.MeshBasicMaterial({ color: 0x8B4C39,wireframe: true });
    

    立方几何体(BoxGeometry)

    构造器
    BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
    width — X轴上面的宽度
    height — Y轴上面的高度
    depth — Z轴上面的深度
    widthSegments — (可选)宽度的分段数,默认值是1。
    heightSegments — (可选)宽度的分段数,默认值是1。
    depthSegments — (可选)宽度的分段数,默认值是1。
    new THREE.BoxGeometry( 1, 1, 1 );
    
    立方体

    圆柱几何体(CylinderGeometry)

    //构造器
    CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
    radiusTop — 圆柱的顶部半径,默认值是1。
    radiusBottom — 圆柱的底部半径,默认值是1。
    height — 圆柱的高度,默认值是1。
    radialSegments — 圆柱侧面周围的分段数,默认为8。
    heightSegments — 圆柱侧面沿着其高度的分段数,默认值为1。
    openEnded — 一个Boolean值,指明该圆锥的底面是开放的还是封顶的。默认值为false,即其底面默认是封顶的。
    thetaStart — 第一个分段的起始角度,默认为0。(three o'clock position)
    thetaLength — 圆柱底面圆扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆柱。
    new THREE.CylinderGeometry( 5, 5, 20, 32 );
    
    圆柱体

    球几何体(SphereGeometry)

    //构造器
    SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
    radius — 球体半径,默认为1。
    widthSegments — 水平分段数(沿着经线分段),最小值为3,默认值为8。
    heightSegments — 垂直分段数(沿着纬线分段),最小值为2,默认值为6。
    phiStart — 指定水平(经线)起始角度,默认值为0。。
    phiLength — 指定水平(经线)扫描角度的大小,默认值为 Math.PI * 2。
    thetaStart — 指定垂直(纬线)起始角度,默认值为0。
    thetaLength — 指定垂直(纬线)扫描角度大小,默认值为 Math.PI。
    该几何体是通过扫描并计算围绕着Y轴(水平扫描)和X轴(垂直扫描)的顶点来创建的。 因此,不完整的球体(类似球形切片)可以通过为phiStart,phiLength,thetaStart和thetaLength设置不同的值来创建, 以定义我们开始(或结束)计算这些顶点的起点(或终点)。
    new THREE.SphereGeometry( 5, 32, 32 )
    
    球几何体

    圆锥几何体(ConeGeometry)

    ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
    radius — 圆锥底部的半径,默认值为1。
    height — 圆锥的高度,默认值为1。
    radialSegments — 圆锥侧面周围的分段数,默认为8。
    heightSegments — 圆锥侧面沿着其高度的分段数,默认值为1。
    openEnded — 一个Boolean值,指明该圆锥的底面是开放的还是封顶的。默认值为false,即其底面默认是封顶的。
    thetaStart — 第一个分段的起始角度,默认为0。(three o'clock position)
    thetaLength — 圆锥底面圆扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆锥。
    new THREE.ConeGeometry( 5, 20, 32 )
    
    圆锥体

    演示代码

    注:演示代码中只需替换initObject()中的东西即可,更改几何体形状,替换对应的构造器就可以

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
                div#canvas-frame {
                    border: none;
                    cursor: pointer;
                    width: 100%;
                    height: 800px;
                    background-color: white;
                }
    
            </style>
        <script src="./js/three.js"></script>
          <!-- 常用相机控制器,依赖文件目录 three.js\examples\js\controls -->
        <script  src="./js/OrbitControls.js"></script>
    </head>
    <body>
        <body onload="threeStart();">
            <div id="canvas-frame"></div>
        </body>
    
        <script>
            var axesHelper;
            var renderer;
            var scene;
            var camera;
            var orbitcontrols;
            init();
            function init(){
                //初始化坐标系
                axesHelper = new THREE.AxesHelper( 10000 );
                axesHelper.position.y = 0;
                // 初始化渲染器
                let width = document.getElementById('canvas-frame').clientWidth;
                let height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
                // 初始化场景
                scene = new THREE.Scene();
                scene.background = new THREE.Color(0XFFFFFF);
                //场景添加坐标系
                scene.add( axesHelper);
                //初始化相机
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.set(0,15,0);
                camera.up.set(0,1,0)
                camera.lookAt(0, 0, 0)
                //初始化引擎控制
                orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
                orbitcontrols.rotateSpeed = -0.25;
                initObject() ;
            }
            function initObject() {
                //BoxGeometry(1, 50, 50) 立方体 
                //CylinderGeometry( 5, 5, 20, 32 ) 圆柱体
                //ConeGeometry( 5, 20, 32 ) 圆锥体
                //SphereGeometry( 5, 50, 50 ) 球体
                const geometry = new  THREE.BoxGeometry( 5, 50, 50 ); //几何体 直接替换上述几何体就可以看到不同的画面
                const material = new THREE.MeshBasicMaterial({ color: 0x8B4C39,wireframe: true }); //材质
                var cube = new THREE.Mesh(geometry,material)
                scene.add(cube);
         }
            function threeStart() {
                    renderer.clear();
                    requestAnimationFrame( threeStart );
                    orbitcontrols.update(); // required when damping is enabled
                    renderer.render( scene, camera );
                }
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:web3D之常见几何体

        本文链接:https://www.haomeiwen.com/subject/poxkvhtx.html