three.js 内置的几何体Geometry

2023-11-17

案例效果

前言

前面我们了解了，一个three.js三大基础renderer，camera，scene和响应式three.js
现在我们来学习一下three.js内置的geometry。three.js提供了很多的几何体给我们直接使用，
我就不多说了直接看代码(有点多)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Three.js Geometry Browser</title>
    <style>
        html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        #newWindow {
            display: block;
            padding: 10px;
            box-sizing: border-box;
            background: #606366;
            border-radius: 5px;
            position: absolute;
            bottom: 0.3em;
            left: 0.5em;
            color: #fff;
            z-index: 10;
            text-decoration: none;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>

<script type="module">
    import {
        BoxGeometry, BoxBufferGeometry,
        BufferGeometry,
        CircleGeometry, CircleBufferGeometry,
        Color,
        ConeGeometry, ConeBufferGeometry,
        Curve,
        CylinderGeometry, CylinderBufferGeometry,
        DodecahedronGeometry, DodecahedronBufferGeometry,
        DoubleSide,
        ExtrudeGeometry, ExtrudeBufferGeometry,
        Float32BufferAttribute,
        FontLoader,
        Group,
        IcosahedronGeometry, IcosahedronBufferGeometry,
        LatheGeometry, LatheBufferGeometry,
        LineSegments,
        LineBasicMaterial,
        Mesh,
        MeshPhongMaterial,PointsMaterial,Points,
        OctahedronGeometry, OctahedronBufferGeometry,
        ParametricGeometry, ParametricBufferGeometry,
        PerspectiveCamera,
        PlaneGeometry, PlaneBufferGeometry,
        PointLight,
        RingGeometry, RingBufferGeometry,
        Scene,
        Shape,
        ShapeGeometry, ShapeBufferGeometry,
        SphereGeometry, SphereBufferGeometry,
        TetrahedronGeometry, TetrahedronBufferGeometry,
        TextGeometry, TextBufferGeometry,
        TorusGeometry, TorusBufferGeometry,
        TorusKnotGeometry, TorusKnotBufferGeometry,
        TubeGeometry, TubeBufferGeometry,
        Vector2,
        Vector3,
        WireframeGeometry, EdgesGeometry,
        WebGLRenderer
    } from "../../../three.js-r115/build/three.module.js";

    import {GUI} from '../../../three.js-r115/examples/jsm/libs/dat.gui.module.js';
    import {OrbitControls} from '../../../three.js-r115/examples/jsm/controls/OrbitControls.js';
    import {ParametricGeometries} from '../../../three.js-r115/examples/jsm/geometries/ParametricGeometries.js';

    const twoPi = Math.PI * 2;
    let isShowGeometry = ''

    class CustomSinCurve extends Curve {

        constructor(scale = 1) {

            super();

            this.scale = scale;

        }

        getPoint(t, optionalTarget = new Vector3()) {

            const tx = t * 3 - 1.5;
            const ty = Math.sin(2 * Math.PI * t);
            const tz = 0;

            return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale);

        }

    }

    function updateGroupGeometry(mesh, geometry) {

        if (geometry.isGeometry) {

            geometry = new BufferGeometry().fromGeometry(geometry);

            console.warn('THREE.GeometryBrowser: Converted Geometry to BufferGeometry.');
        }

        mesh.children[0].geometry.dispose();
        mesh.children[1].geometry.dispose();

        if (isShowGeometry === 'EdgesGeometry') {
            mesh.children[0].geometry = new EdgesGeometry(geometry);
        } else {
            mesh.children[0].geometry = new WireframeGeometry(geometry);
        }
        mesh.children[1].geometry = geometry;

        if (isShowGeometry === 'EdgesGeometry' || isShowGeometry === 'WireframeGeometry') {
            mesh.children[1].visible = false
        } else {
            mesh.children[1].visible = true
        }
        // these do not update nicely together if shared

        isShowGeometry = ''
    }

    // heart shape

    const x = 0, y = 0;

    const heartShape = new Shape();

    heartShape.moveTo(x + 5, y + 5);
    heartShape.bezierCurveTo(x + 5, y + 5, x + 4, y, x, y);
    heartShape.bezierCurveTo(x - 6, y, x - 6, y + 7, x - 6, y + 7);
    heartShape.bezierCurveTo(x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19);
    heartShape.bezierCurveTo(x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7);
    heartShape.bezierCurveTo(x + 16, y + 7, x + 16, y, x + 10, y);
    heartShape.bezierCurveTo(x + 7, y, x + 5, y + 5, x + 5, y + 5);

    const guis = {

        BoxBufferGeometry: function (mesh) {

            const data = {
                width: 15,
                height: 15,
                depth: 15,
                widthSegments: 1,
                heightSegments: 1,
                depthSegments: 1
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new BoxBufferGeometry(
                        data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
                    )
                );

            }

            const folder = gui.addFolder('THREE.BoxBufferGeometry');

            folder.add(data, 'width', 1, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 30).onChange(generateGeometry);
            folder.add(data, 'depth', 1, 30).onChange(generateGeometry);
            folder.add(data, 'widthSegments', 1, 10).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 1, 10).step(1).onChange(generateGeometry);
            folder.add(data, 'depthSegments', 1, 10).step(1).onChange(generateGeometry);

            generateGeometry();
            this['BoxBufferGeometry'].generateGeometry = generateGeometry


        },

        BoxGeometry: function (mesh) {

            const data = {
                width: 15,
                height: 15,
                depth: 15,
                widthSegments: 1,
                heightSegments: 1,
                depthSegments: 1
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new BoxGeometry(
                        data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
                    )
                );

            }

            const folder = gui.addFolder('THREE.BoxGeometry');

            folder.add(data, 'width', 1, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 30).onChange(generateGeometry);
            folder.add(data, 'depth', 1, 30).onChange(generateGeometry);
            folder.add(data, 'widthSegments', 1, 10).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 1, 10).step(1).onChange(generateGeometry);
            folder.add(data, 'depthSegments', 1, 10).step(1).onChange(generateGeometry);

            generateGeometry();
            this['BoxGeometry'].generateGeometry = generateGeometry


        },

        CylinderBufferGeometry: function (mesh) {

            const data = {
                radiusTop: 5,
                radiusBottom: 5,
                height: 10,
                radialSegments: 8,
                heightSegments: 1,
                openEnded: false,
                thetaStart: 0,
                thetaLength: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new CylinderBufferGeometry(
                        data.radiusTop,
                        data.radiusBottom,
                        data.height,
                        data.radialSegments,
                        data.heightSegments,
                        data.openEnded,
                        data.thetaStart,
                        data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.CylinderBufferGeometry');

            folder.add(data, 'radiusTop', 0, 30).onChange(generateGeometry);
            folder.add(data, 'radiusBottom', 0, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 50).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 3, 64).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 1, 64).step(1).onChange(generateGeometry);
            folder.add(data, 'openEnded').onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);


            generateGeometry();
            this['CylinderBufferGeometry'].generateGeometry = generateGeometry


        },

        CylinderGeometry: function (mesh) {

            const data = {
                radiusTop: 5,
                radiusBottom: 5,
                height: 10,
                radialSegments: 8,
                heightSegments: 1,
                openEnded: false,
                thetaStart: 0,
                thetaLength: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new CylinderGeometry(
                        data.radiusTop,
                        data.radiusBottom,
                        data.height,
                        data.radialSegments,
                        data.heightSegments,
                        data.openEnded,
                        data.thetaStart,
                        data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.CylinderGeometry');

            folder.add(data, 'radiusTop', 1, 30).onChange(generateGeometry);
            folder.add(data, 'radiusBottom', 1, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 50).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 3, 64).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 1, 64).step(1).onChange(generateGeometry);
            folder.add(data, 'openEnded').onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);


            generateGeometry();
            this['CylinderGeometry'].generateGeometry = generateGeometry


        },

        ConeBufferGeometry: function (mesh) {

            const data = {
                radius: 5,
                height: 10,
                radialSegments: 8,
                heightSegments: 1,
                openEnded: false,
                thetaStart: 0,
                thetaLength: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new ConeBufferGeometry(
                        data.radius,
                        data.height,
                        data.radialSegments,
                        data.heightSegments,
                        data.openEnded,
                        data.thetaStart,
                        data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.ConeBufferGeometry');

            folder.add(data, 'radius', 0, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 50).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 3, 64).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 1, 64).step(1).onChange(generateGeometry);
            folder.add(data, 'openEnded').onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);


            generateGeometry();
            this['ConeBufferGeometry'].generateGeometry = generateGeometry


        },

        ConeGeometry: function (mesh) {

            const data = {
                radius: 5,
                height: 10,
                radialSegments: 8,
                heightSegments: 1,
                openEnded: false,
                thetaStart: 0,
                thetaLength: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new ConeGeometry(
                        data.radius,
                        data.height,
                        data.radialSegments,
                        data.heightSegments,
                        data.openEnded,
                        data.thetaStart,
                        data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.ConeGeometry');

            folder.add(data, 'radius', 0, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 50).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 3, 64).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 1, 64).step(1).onChange(generateGeometry);
            folder.add(data, 'openEnded').onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);


            generateGeometry();
            this['ConeGeometry'].generateGeometry = generateGeometry


        },

        CircleBufferGeometry: function (mesh) {

            const data = {
                radius: 10,
                segments: 32,
                thetaStart: 0,
                thetaLength: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new CircleBufferGeometry(
                        data.radius, data.segments, data.thetaStart, data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.CircleBufferGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'segments', 0, 128).step(1).onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['CircleBufferGeometry'].generateGeometry = generateGeometry


        },

        CircleGeometry: function (mesh) {

            const data = {
                radius: 10,
                segments: 32,
                thetaStart: 0,
                thetaLength: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new CircleGeometry(
                        data.radius, data.segments, data.thetaStart, data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.CircleGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'segments', 0, 128).step(1).onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['CircleGeometry'].generateGeometry = generateGeometry


        },

        DodecahedronGeometry: function (mesh) {

            const data = {
                radius: 10,
                detail: 0
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new DodecahedronGeometry(
                        data.radius, data.detail
                    )
                );

            }

            const folder = gui.addFolder('THREE.DodecahedronGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'detail', 0, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['DodecahedronGeometry'].generateGeometry = generateGeometry


        },

        DodecahedronBufferGeometry: function (mesh) {

            const data = {
                radius: 10,
                detail: 0
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new DodecahedronBufferGeometry(
                        data.radius, data.detail
                    )
                );

            }

            const folder = gui.addFolder('THREE.DodecahedronBufferGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'detail', 0, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['DodecahedronBufferGeometry'].generateGeometry = generateGeometry


        },

        EdgesGeometry: function (mesh) {
            isShowGeometry = 'EdgesGeometry'
            const selects = []
            Object.keys(guis).forEach(value => selects.push(value))

            const data = {
                select: 'BoxBufferGeometry',
            };

            function generateGeometry() {
                const geometry = new BoxGeometry(data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments)
                updateGroupGeometry(mesh, geometry);
            }

            const folder = gui.addFolder('THREE.EdgesGeometry');

            folder.add(data, 'select', selects).onChange((value) => {
                console.log(value)
                isShowGeometry = 'EdgesGeometry'
                this[data.select].generateGeometry()
            });

            this[data.select].generateGeometry()
            this['EdgesGeometry'].generateGeometry = generateGeometry
        },

        IcosahedronGeometry: function (mesh) {

            const data = {
                radius: 10,
                detail: 0
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new IcosahedronGeometry(
                        data.radius, data.detail
                    )
                );

            }

            const folder = gui.addFolder('THREE.IcosahedronGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'detail', 0, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['IcosahedronGeometry'].generateGeometry = generateGeometry


        },

        IcosahedronBufferGeometry: function (mesh) {

            const data = {
                radius: 10,
                detail: 0
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new IcosahedronBufferGeometry(
                        data.radius, data.detail
                    )
                );

            }

            const folder = gui.addFolder('THREE.IcosahedronBufferGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'detail', 0, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['IcosahedronBufferGeometry'].generateGeometry = generateGeometry


        },

        LatheBufferGeometry: function (mesh) {

            const points = [];

            for (let i = 0; i < 10; i++) {

                points.push(new Vector2(Math.sin(i * 0.2) * 10 + 5, (i - 5) * 2));

            }

            const data = {
                segments: 12,
                phiStart: 0,
                phiLength: twoPi
            };

            function generateGeometry() {

                const geometry = new LatheBufferGeometry(
                    points, data.segments, data.phiStart, data.phiLength
                );

                updateGroupGeometry(mesh, geometry);

            }

            const folder = gui.addFolder('THREE.LatheBufferGeometry');

            folder.add(data, 'segments', 1, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'phiStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'phiLength', 0, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['LatheBufferGeometry'].generateGeometry = generateGeometry


        },

        LatheGeometry: function (mesh) {

            const points = [];

            for (let i = 0; i < 10; i++) {

                points.push(new Vector2(Math.sin(i * 0.2) * 10 + 5, (i - 5) * 2));

            }

            const data = {
                segments: 12,
                phiStart: 0,
                phiLength: twoPi
            };

            function generateGeometry() {

                const geometry = new LatheGeometry(
                    points, data.segments, data.phiStart, data.phiLength
                );

                updateGroupGeometry(mesh, geometry);

            }

            const folder = gui.addFolder('THREE.LatheGeometry');

            folder.add(data, 'segments', 1, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'phiStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'phiLength', 0, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['LatheGeometry'].generateGeometry = generateGeometry


        },

        OctahedronGeometry: function (mesh) {

            const data = {
                radius: 10,
                detail: 0
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new OctahedronGeometry(
                        data.radius, data.detail
                    )
                );

            }

            const folder = gui.addFolder('THREE.OctahedronGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'detail', 0, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['OctahedronGeometry'].generateGeometry = generateGeometry


        },

        OctahedronBufferGeometry: function (mesh) {

            const data = {
                radius: 10,
                detail: 0
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new OctahedronBufferGeometry(
                        data.radius, data.detail
                    )
                );

            }

            const folder = gui.addFolder('THREE.OctahedronBufferGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'detail', 0, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['OctahedronBufferGeometry'].generateGeometry = generateGeometry


        },

        PlaneBufferGeometry: function (mesh) {

            const data = {
                width: 10,
                height: 10,
                widthSegments: 1,
                heightSegments: 1
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new PlaneBufferGeometry(
                        data.width, data.height, data.widthSegments, data.heightSegments
                    )
                );

            }

            const folder = gui.addFolder('THREE.PlaneBufferGeometry');

            folder.add(data, 'width', 1, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 30).onChange(generateGeometry);
            folder.add(data, 'widthSegments', 1, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 1, 30).step(1).onChange(generateGeometry);

            generateGeometry();
            this['PlaneBufferGeometry'].generateGeometry = generateGeometry


        },

        PlaneGeometry: function (mesh) {

            const data = {
                width: 10,
                height: 10,
                widthSegments: 1,
                heightSegments: 1
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new PlaneGeometry(
                        data.width, data.height, data.widthSegments, data.heightSegments
                    )
                );

            }

            const folder = gui.addFolder('THREE.PlaneGeometry');

            folder.add(data, 'width', 1, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 30).onChange(generateGeometry);
            folder.add(data, 'widthSegments', 1, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 1, 30).step(1).onChange(generateGeometry);

            generateGeometry();
            this['PlaneGeometry'].generateGeometry = generateGeometry


        },

        RingBufferGeometry: function (mesh) {

            const data = {
                innerRadius: 5,
                outerRadius: 10,
                thetaSegments: 8,
                phiSegments: 8,
                thetaStart: 0,
                thetaLength: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new RingBufferGeometry(
                        data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.RingBufferGeometry');

            folder.add(data, 'innerRadius', 1, 30).onChange(generateGeometry);
            folder.add(data, 'outerRadius', 1, 30).onChange(generateGeometry);
            folder.add(data, 'thetaSegments', 1, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'phiSegments', 1, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['RingBufferGeometry'].generateGeometry = generateGeometry


        },

        RingGeometry: function (mesh) {

            const data = {
                innerRadius: 5,
                outerRadius: 10,
                thetaSegments: 8,
                phiSegments: 8,
                thetaStart: 0,
                thetaLength: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new RingGeometry(
                        data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.RingGeometry');

            folder.add(data, 'innerRadius', 1, 30).onChange(generateGeometry);
            folder.add(data, 'outerRadius', 1, 30).onChange(generateGeometry);
            folder.add(data, 'thetaSegments', 1, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'phiSegments', 1, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['RingGeometry'].generateGeometry = generateGeometry


        },

        SphereBufferGeometry: function (mesh) {

            const data = {
                radius: 15,
                widthSegments: 8,
                heightSegments: 6,
                phiStart: 0,
                phiLength: twoPi,
                thetaStart: 0,
                thetaLength: Math.PI
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new SphereBufferGeometry(
                        data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.SphereBufferGeometry');

            folder.add(data, 'radius', 1, 30).onChange(generateGeometry);
            folder.add(data, 'widthSegments', 3, 32).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 2, 32).step(1).onChange(generateGeometry);
            folder.add(data, 'phiStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'phiLength', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['SphereBufferGeometry'].generateGeometry = generateGeometry


        },

        SphereGeometry: function (mesh) {

            const data = {
                radius: 15,
                widthSegments: 8,
                heightSegments: 6,
                phiStart: 0,
                phiLength: twoPi,
                thetaStart: 0,
                thetaLength: Math.PI
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new SphereGeometry(
                        data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
                    )
                );

            }

            const folder = gui.addFolder('THREE.SphereGeometry');

            folder.add(data, 'radius', 1, 30).onChange(generateGeometry);
            folder.add(data, 'widthSegments', 3, 32).step(1).onChange(generateGeometry);
            folder.add(data, 'heightSegments', 2, 32).step(1).onChange(generateGeometry);
            folder.add(data, 'phiStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'phiLength', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaStart', 0, twoPi).onChange(generateGeometry);
            folder.add(data, 'thetaLength', 0, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['SphereGeometry'].generateGeometry = generateGeometry


        },

        TetrahedronGeometry: function (mesh) {

            const data = {
                radius: 10,
                detail: 0
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new TetrahedronGeometry(
                        data.radius, data.detail
                    )
                );

            }

            const folder = gui.addFolder('THREE.TetrahedronGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'detail', 0, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['TetrahedronGeometry'].generateGeometry = generateGeometry


        },

        TetrahedronBufferGeometry: function (mesh) {

            const data = {
                radius: 10,
                detail: 0
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new TetrahedronBufferGeometry(
                        data.radius, data.detail
                    )
                );

            }

            const folder = gui.addFolder('THREE.TetrahedronBufferGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'detail', 0, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['TetrahedronBufferGeometry'].generateGeometry = generateGeometry


        },

        TextGeometry: function (mesh) {

            const data = {
                text: "TextGeometry",
                size: 5,
                height: 2,
                curveSegments: 12,
                font: "helvetiker",
                weight: "regular",
                bevelEnabled: false,
                bevelThickness: 1,
                bevelSize: 0.5,
                bevelOffset: 0.0,
                bevelSegments: 3
            };

            const fonts = [
                "helvetiker",
                "optimer",
                "gentilis",
                "droid/droid_serif"
            ];

            const weights = [
                "regular", "bold"
            ];

            function generateGeometry() {

                const loader = new FontLoader();
                loader.load('../../../three.js-r115/examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function (font) {

                    const geometry = new TextGeometry(data.text, {
                        font: font,
                        size: data.size,
                        height: data.height,
                        curveSegments: data.curveSegments,
                        bevelEnabled: data.bevelEnabled,
                        bevelThickness: data.bevelThickness,
                        bevelSize: data.bevelSize,
                        bevelOffset: data.bevelOffset,
                        bevelSegments: data.bevelSegments
                    });
                    geometry.center();

                    updateGroupGeometry(mesh, geometry);

                });

            }

            //Hide the wireframe
            mesh.children[0].visible = true;

            const folder = gui.addFolder('THREE.TextGeometry');

            folder.add(data, 'text').onChange(generateGeometry);
            folder.add(data, 'size', 1, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 20).onChange(generateGeometry);
            folder.add(data, 'curveSegments', 1, 20).step(1).onChange(generateGeometry);
            folder.add(data, 'font', fonts).onChange(generateGeometry);
            folder.add(data, 'weight', weights).onChange(generateGeometry);
            folder.add(data, 'bevelEnabled').onChange(generateGeometry);
            folder.add(data, 'bevelThickness', 0.1, 3).onChange(generateGeometry);
            folder.add(data, 'bevelSize', 0, 3).onChange(generateGeometry);
            folder.add(data, 'bevelOffset', -0.5, 1.5).onChange(generateGeometry);
            folder.add(data, 'bevelSegments', 0, 8).step(1).onChange(generateGeometry);

            generateGeometry();
            this['TextGeometry'].generateGeometry = generateGeometry


        },

        TextBufferGeometry: function (mesh) {

            const data = {
                text: "TextBufferGeometry",
                size: 5,
                height: 2,
                curveSegments: 12,
                font: "helvetiker",
                weight: "regular",
                bevelEnabled: false,
                bevelThickness: 1,
                bevelSize: 0.5,
                bevelOffset: 0.0,
                bevelSegments: 3
            };

            const fonts = [
                "helvetiker",
                "optimer",
                "gentilis",
                "droid/droid_serif"
            ];

            const weights = [
                "regular", "bold"
            ];

            function generateGeometry() {

                const loader = new FontLoader();
                loader.load('../../../three.js-r115/examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function (font) {

                    const geometry = new TextBufferGeometry(data.text, {
                        font: font,
                        size: data.size,
                        height: data.height,
                        curveSegments: data.curveSegments,
                        bevelEnabled: data.bevelEnabled,
                        bevelThickness: data.bevelThickness,
                        bevelSize: data.bevelSize,
                        bevelOffset: data.bevelOffset,
                        bevelSegments: data.bevelSegments
                    });
                    geometry.center();

                    updateGroupGeometry(mesh, geometry);

                });

            }

            //Hide the wireframe
            mesh.children[0].visible = true;

            const folder = gui.addFolder('THREE.TextBufferGeometry');

            folder.add(data, 'text').onChange(generateGeometry);
            folder.add(data, 'size', 1, 30).onChange(generateGeometry);
            folder.add(data, 'height', 1, 20).onChange(generateGeometry);
            folder.add(data, 'curveSegments', 1, 20).step(1).onChange(generateGeometry);
            folder.add(data, 'font', fonts).onChange(generateGeometry);
            folder.add(data, 'weight', weights).onChange(generateGeometry);
            folder.add(data, 'bevelEnabled').onChange(generateGeometry);
            folder.add(data, 'bevelThickness', 0.1, 3).onChange(generateGeometry);
            folder.add(data, 'bevelSize', 0, 3).onChange(generateGeometry);
            folder.add(data, 'bevelOffset', -0.5, 1.5).onChange(generateGeometry);
            folder.add(data, 'bevelSegments', 0, 8).step(1).onChange(generateGeometry);

            generateGeometry();
            this['TextBufferGeometry'].generateGeometry = generateGeometry


        },

        TorusBufferGeometry: function (mesh) {

            const data = {
                radius: 10,
                tube: 3,
                radialSegments: 16,
                tubularSegments: 100,
                arc: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new TorusBufferGeometry(
                        data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
                    )
                );

            }

            const folder = gui.addFolder('THREE.TorusBufferGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'tube', 0.1, 10).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 2, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'tubularSegments', 3, 200).step(1).onChange(generateGeometry);
            folder.add(data, 'arc', 0.1, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['TorusBufferGeometry'].generateGeometry = generateGeometry


        },

        TorusGeometry: function (mesh) {

            const data = {
                radius: 10,
                tube: 3,
                radialSegments: 16,
                tubularSegments: 100,
                arc: twoPi
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new TorusGeometry(
                        data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
                    )
                );

            }

            const folder = gui.addFolder('THREE.TorusGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'tube', 0.1, 10).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 2, 30).step(1).onChange(generateGeometry);
            folder.add(data, 'tubularSegments', 3, 200).step(1).onChange(generateGeometry);
            folder.add(data, 'arc', 0.1, twoPi).onChange(generateGeometry);

            generateGeometry();
            this['TorusGeometry'].generateGeometry = generateGeometry


        },

        TorusKnotBufferGeometry: function (mesh) {

            const data = {
                radius: 10,
                tube: 3,
                tubularSegments: 64,
                radialSegments: 8,
                p: 2,
                q: 3
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new TorusKnotBufferGeometry(
                        data.radius, data.tube, data.tubularSegments, data.radialSegments,
                        data.p, data.q
                    )
                );

            }

            const folder = gui.addFolder('THREE.TorusKnotBufferGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'tube', 0.1, 10).onChange(generateGeometry);
            folder.add(data, 'tubularSegments', 3, 300).step(1).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 3, 20).step(1).onChange(generateGeometry);
            folder.add(data, 'p', 1, 20).step(1).onChange(generateGeometry);
            folder.add(data, 'q', 1, 20).step(1).onChange(generateGeometry);

            generateGeometry();
            this['TorusKnotBufferGeometry'].generateGeometry = generateGeometry


        },

        TorusKnotGeometry: function (mesh) {

            const data = {
                radius: 10,
                tube: 3,
                tubularSegments: 64,
                radialSegments: 8,
                p: 2,
                q: 3
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new TorusKnotGeometry(
                        data.radius, data.tube, data.tubularSegments, data.radialSegments,
                        data.p, data.q
                    )
                );

            }

            const folder = gui.addFolder('THREE.TorusKnotGeometry');

            folder.add(data, 'radius', 1, 20).onChange(generateGeometry);
            folder.add(data, 'tube', 0.1, 10).onChange(generateGeometry);
            folder.add(data, 'tubularSegments', 3, 300).step(1).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 3, 20).step(1).onChange(generateGeometry);
            folder.add(data, 'p', 1, 20).step(1).onChange(generateGeometry);
            folder.add(data, 'q', 1, 20).step(1).onChange(generateGeometry);

            generateGeometry();
            this['TorusKnotGeometry'].generateGeometry = generateGeometry


        },

        ParametricBufferGeometry: function (mesh) {

            const data = {
                slices: 25,
                stacks: 25
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new ParametricBufferGeometry(ParametricGeometries.klein, data.slices, data.stacks)
                );

            }

            const folder = gui.addFolder('THREE.ParametricBufferGeometry');

            folder.add(data, 'slices', 1, 100).step(1).onChange(generateGeometry);
            folder.add(data, 'stacks', 1, 100).step(1).onChange(generateGeometry);

            generateGeometry();
            this['ParametricBufferGeometry'].generateGeometry = generateGeometry

        },

        ParametricGeometry: function (mesh) {

            const data = {
                slices: 25,
                stacks: 25
            };

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new ParametricGeometry(ParametricGeometries.klein, data.slices, data.stacks)
                );

            }

            const folder = gui.addFolder('THREE.ParametricGeometry');

            folder.add(data, 'slices', 1, 100).step(1).onChange(generateGeometry);
            folder.add(data, 'stacks', 1, 100).step(1).onChange(generateGeometry);

            generateGeometry();
            this['ParametricGeometry'].generateGeometry = generateGeometry

        },

        TubeGeometry: function (mesh) {

            const data = {
                segments: 20,
                radius: 2,
                radialSegments: 8
            };

            const path = new CustomSinCurve(10);

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new TubeGeometry(path, data.segments, data.radius, data.radialSegments, false)
                );

            }

            const folder = gui.addFolder('THREE.TubeGeometry');

            folder.add(data, 'segments', 1, 100).step(1).onChange(generateGeometry);
            folder.add(data, 'radius', 1, 10).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 1, 20).step(1).onChange(generateGeometry);

            generateGeometry();
            this['TubeGeometry'].generateGeometry = generateGeometry

        },

        TubeBufferGeometry: function (mesh) {

            const data = {
                segments: 20,
                radius: 2,
                radialSegments: 8
            };

            const path = new CustomSinCurve(10);

            function generateGeometry() {

                updateGroupGeometry(mesh,
                    new TubeBufferGeometry(path, data.segments, data.radius, data.radialSegments, false)
                );

            }

            const folder = gui.addFolder('THREE.TubeBufferGeometry');

            folder.add(data, 'segments', 1, 100).step(1).onChange(generateGeometry);
            folder.add(data, 'radius', 1, 10).onChange(generateGeometry);
            folder.add(data, 'radialSegments', 1, 20).step(1).onChange(generateGeometry);

            generateGeometry();
            this['TubeBufferGeometry'].generateGeometry = generateGeometry

        },

        ShapeGeometry: function (mesh) {

            const data = {
                segments: 12
            };

            function generateGeometry() {

                const geometry = new ShapeGeometry(heartShape, data.segments);
                geometry.center();

                updateGroupGeometry(mesh, geometry);

            }

            const folder = gui.addFolder('THREE.ShapeGeometry');
            folder.add(data, 'segments', 1, 100).step(1).onChange(generateGeometry);

            generateGeometry();
            this['ShapeGeometry'].generateGeometry = generateGeometry

        },

        ShapeBufferGeometry: function (mesh) {

            const data = {
                segments: 12
            };

            function generateGeometry() {

                const geometry = new ShapeBufferGeometry(heartShape, data.segments);
                geometry.center();

                updateGroupGeometry(mesh, geometry);

            }

            const folder = gui.addFolder('THREE.ShapeBufferGeometry');
            folder.add(data, 'segments', 1, 100).step(1).onChange(generateGeometry);

            generateGeometry();
            this['ShapeBufferGeometry'].generateGeometry = generateGeometry

        },

        ExtrudeGeometry: function (mesh) {

            const data = {
                steps: 2,
                depth: 16,
                bevelEnabled: true,
                bevelThickness: 1,
                bevelSize: 1,
                bevelOffset: 0,
                bevelSegments: 1
            };

            const length = 12, width = 8;

            const shape = new Shape();
            shape.moveTo(0, 0);
            shape.lineTo(0, width);
            shape.lineTo(length, width);
            shape.lineTo(length, 0);
            shape.lineTo(0, 0);

            function generateGeometry() {

                const geometry = new ExtrudeGeometry(shape, data);
                geometry.center();

                updateGroupGeometry(mesh, geometry);

            }

            const folder = gui.addFolder('THREE.ExtrudeGeometry');

            folder.add(data, 'steps', 1, 10).step(1).onChange(generateGeometry);
            folder.add(data, 'depth', 1, 20).onChange(generateGeometry);
            folder.add(data, 'bevelThickness', 1, 5).step(1).onChange(generateGeometry);
            folder.add(data, 'bevelSize', 0, 5).step(1).onChange(generateGeometry);
            folder.add(data, 'bevelOffset', -4, 5).step(1).onChange(generateGeometry);
            folder.add(data, 'bevelSegments', 1, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['ExtrudeGeometry'].generateGeometry = generateGeometry

        },

        ExtrudeBufferGeometry: function (mesh) {

            const data = {
                steps: 2,
                depth: 16,
                bevelEnabled: true,
                bevelThickness: 1,
                bevelSize: 1,
                bevelOffset: 0,
                bevelSegments: 1
            };

            const length = 12, width = 8;

            const shape = new Shape();
            shape.moveTo(0, 0);
            shape.lineTo(0, width);
            shape.lineTo(length, width);
            shape.lineTo(length, 0);
            shape.lineTo(0, 0);

            function generateGeometry() {

                const geometry = new ExtrudeBufferGeometry(shape, data);
                geometry.center();

                updateGroupGeometry(mesh, geometry);

            }

            const folder = gui.addFolder('THREE.ExtrudeBufferGeometry');

            folder.add(data, 'steps', 1, 10).step(1).onChange(generateGeometry);
            folder.add(data, 'depth', 1, 20).onChange(generateGeometry);
            folder.add(data, 'bevelThickness', 1, 5).step(1).onChange(generateGeometry);
            folder.add(data, 'bevelSize', 0, 5).step(1).onChange(generateGeometry);
            folder.add(data, 'bevelOffset', -4, 5).step(1).onChange(generateGeometry);
            folder.add(data, 'bevelSegments', 1, 5).step(1).onChange(generateGeometry);

            generateGeometry();
            this['ExtrudeBufferGeometry'].generateGeometry = generateGeometry

        },

        WireframeGeometry: function (mesh) {
            isShowGeometry = 'WireframeGeometry'
            const selects = []
            Object.keys(guis).forEach(value => selects.push(value))

            const data = {
                select: 'BoxBufferGeometry',
            };

            function generateGeometry() {
                const geometry = new BoxGeometry(data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments)
                updateGroupGeometry(mesh, geometry);
            }

            const folder = gui.addFolder('THREE.WireframeGeometry');

            folder.add(data, 'select', selects).onChange((value) => {
                console.log(value)
                isShowGeometry = 'WireframeGeometry'
                this[data.select].generateGeometry()
            });

            this[data.select].generateGeometry()
            this['WireframeGeometry'].generateGeometry = generateGeometry
        }

    };

    function chooseFromHash(mesh) {
        let selectedGeometry = "BoxGeometry";
        Object.keys(guis).forEach((value) => {
            if (guis[value] !== undefined) {
                if (selectedGeometry !== value) guis[value](mesh);
            }
        })
        setTimeout(() => guis[selectedGeometry](mesh))
    }

    const gui = new GUI();

    const scene = new Scene();
    scene.background = new Color(0x444444);

    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 50);
    camera.position.z = 30;

    const canvas = document.getElementById('canvas');
    const renderer = new WebGLRenderer({canvas, antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    const orbit = new OrbitControls(camera, canvas);
    orbit.enableZoom = false;

    const lights = [];
    lights[0] = new PointLight(0xffffff, 1, 0);
    lights[1] = new PointLight(0xffffff, 1, 0);
    lights[2] = new PointLight(0xffffff, 1, 0);

    lights[0].position.set(0, 200, 0);
    lights[1].position.set(100, 200, 100);
    lights[2].position.set(-100, -200, -100);

    scene.add(lights[0]);
    scene.add(lights[1]);
    scene.add(lights[2]);

    const group = new Group();

    let geometry = new BufferGeometry();
    geometry.setAttribute('position', new Float32BufferAttribute([], 3));

    const lineMaterial = new LineBasicMaterial({color: 0xffffff, transparent: true, opacity: 0.8});
    const meshMaterial = new MeshPhongMaterial({color: 0x156289, emissive: 0x072534, side: DoubleSide, flatShading: true});
    group.add(new LineSegments(geometry, lineMaterial));
    group.add(new Mesh(geometry, meshMaterial));

    chooseFromHash(group);

    scene.add(group);

    function render() {
        requestAnimationFrame(render);
        group.rotation.x += 0.005;
        group.rotation.y += 0.005;
        renderer.render(scene, camera);
    }

    window.addEventListener('resize', function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }, false);

    render();

</script>
</body>
</html>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

webgl

前端

threeJs

javascript

three.js 内置的几何体Geometry 的相关文章

Angular UI 模式的范围问题

我无法理解使用角度 UI 模式的范围虽然这里不是很明显但我已经正确设置了模块和所有内容据我所知但这些代码示例尤其是我发现错误的地方 index html 其中重要部分 div class btn group div
如何阻止直接访问我的 JavaScript 文件？

我使用 Minify 来缩小并缓存所有脚本请求我只希望我的用户能够访问 JavaScript 文件的缩小版本缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
浏览器视口大小（以设备像素为单位）

Goal 我希望 Flash 能够获得有关浏览器视口宽度和高度以设备像素为单位的准确信息初始化调整大小或浏览器缩放事件时规格我需要将 flash 嵌入到在 chrome safari firefox 等中运行的 html 页面中
从函数返回函数的目的是什么？

阅读一些遗留代码发现 A prototype setSize function var v1 new Vector2 return function size var halfSize v1 copy size multiplyScala
如何使用javascript确保元素仅在圆上朝一个方向移动？

好吧我承认我对三角学真的很糟糕出于上下文的考虑我将添加我在这里提到的问题中的内容参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
IntersectionObserver是否支持水平滚动观察？

我制作了几个垂直滚动 IntersectionObserver 模块但我对水平滚动感兴趣根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化我什至不确定移动 Safari 是否会将缩放后的图片
导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用

我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常导航图标和下拉图标出现但它不起作用当我单击nav图标或dropdown按钮无dropdown menu apears 我想特别提到的是我还包
React autoFocus 将光标设置为输入值的开头

我有一个受控输入最初显示一个值我已将该输入设置为自动聚焦但当我希望它出现在末尾时光标出现在输入的开头我知道这可能是因为自动对焦是在值之前添加的但我不能 100 确定在输入字段末尾完成光标初始化的最佳方法是什么 var Test
JavaScript推送函数中的动态变量

我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
IE 中的 XPath 查询使用从零开始的索引，但 W3C 规范是从一开始的。我应该如何处理差异？

问题我正在转换目前仅适用于 Internet Explorer 的相对较大的 Javascript 代码以便使其也适用于其他浏览器由于代码广泛使用 XPath 我们做了一些兼容性功能以使事情变得更容易 function selectN
onclick 事件中未调用函数

我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器到目前为止这是我的代码 document ready function var valid url new RegExp youtube com
使用 JavaScript 移动页面上的按钮

我的按钮可以移动但奇怪的是我无法弄清楚偏移是否有问题我希望我的按钮随着鼠标光标移动但现在它的移动方式不是我想要的有时它会消失另外创建的新按钮是重叠的我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
如何正确取消引用然后删除 JavaScript 对象？

我想知道从内存中完全取消引用 JavaScript 对象的正确方法确保删除时不会在内存中悬空并且垃圾收集器会删除该对象当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
如何计算特定字符在字符串中出现的次数

我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中如果是有多少个我尝试计算每一种模式但是太多了我尝试使用 Python 中的 in 运算符的替代方案但效果不佳 function calc fit element var
Google Maps API (v3) 添加/更新标记

编辑它现在可以工作但如果用户不允许或没有基于位置的服务则不会加载请参阅 jsfiddle 示例接受的答案评论我已经浏览了一些教程和问题但我无法安静地理解正在发生的事情或者在这种情况下没有发生当用户单击链接时我正在加载地图
使用javascript动态更新css内容

需要将 css 更新为动态值我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发应用程序将相应缩放我将此应用程序加载到 cordova 中并让它在 iPAD 中运行然后我意识到需要使用
Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

Closed 这个问题是基于意见的 help closed questions 目前不接受答案我对茉莉花有经验并且非常喜欢它有谁有 Jasmine 和 Mocha 的经验特别是 Rails 的经验吗我想知道是否值得转用我已经在 J
使用 next.js 进行服务器端渲染与传统 SSR

我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法其中根据后端堆栈使用 razor pub other 进行渲染因此每次用户单击导航链接时它只会向服务器发送请求整个页面将刷新接收新的 HTML 这就是
有没有办法使用 ko.observableArray 作为地图？

有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图字典一样例如 var arr ko observableArray
没有输入的 jQuery 日期选择器

我有一个相当复杂的网络应用程序我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间不涉及任何表单元素不我不会添加秘密表单字段因此简单的开箱即用方法根本行不通我希望有人可以提供

随机推荐

Android不同版本SD卡存储权限解决

1 Android6 0之前 6 0之前是不需要动态申请权限的直接在manifest中申请即可以正常使用
gulp基础：gulptask

var gulp require gulp var browserify require gulp browserify 模块化的打包 var uglify require gulp uglify js的压缩 var webserver r
Mysql设计学生宿舍管理系统+考勤系统

一学生宿舍管理系统要求学校宿舍管理系统要求包含宿舍信息学生信息每日的宿舍查房记录分析学生与宿舍的关系 m 1 宿舍的查房记录是根据宿舍来查的与宿舍有关系一个宿舍可以多次查房宿舍与查房记录是1 m的关系宿舍信息表 cr
浅谈什么是大数据

浅谈什么是大数据有人可能发现了我这个专栏写的就是大数据所以我们一起来谈谈大数据大数据概念百度百科对于大数据 Big data 研究机构Gartner给出了这样的定义大数据是需要新处理模式才能具有更强的决策力洞察发现力和流
基于BCM53262交换芯片平台的Linux操作系统移植（一）编译环境

2018 05 10 09 26 zhoulinhua 2018 05 10 一源码相关链接 http www at91 com linux4sam bin view Linux4SAM 1 a91bootstrap源码获取 git c
C++ 外观模式

include
redhat 6.4安装oracle11g RAC （四）

创建集群数据库在节点rac1上用oracle用户执行dbca创建RAC数据库 root rac1 su oracle oracle rac1 dbca 选择创建数据库自定义数据库也可以是通用配置类型选择Admin Managed 输
微信小程序使用npm安装包

小程序现在支持直接通过npm安装包了点击这里了解更多记录一下我自己的安装步骤及安装过程中遇到的一些问题希望能够帮助到正在阅读此篇文章的你我就直接通过在项目根目录安装miniprogram datepicker做演示了 1 在项目根目
SIMD优化之ARM纯汇编开发

ARM纯汇编开发注这篇文章是两年前写的现在更新到CSDN 当时认知不足其中可能有不少错误敬请行家指正为什么要用纯汇编开发效率高这里可能让很多人大跌眼镜了纯汇编开发效率高首先这个是有限定条件的需要反复调优的重度运算场景
selenium读取excel中的数据实现自动登录

一当用selenium实现自动登录时测试不同账号的登录 1 可以写一个登录方法login driver username password 对每一个账号分别写一个方法test zhnagshan log 然后将数据传入到登录方法logi
【自动驾驶技术】优达学城无人驾驶工程师学习笔记（六）——Github与Markdown相关教程

Github与Markdown相关教程本博文为笔者关于优达学城无人驾驶工程师课程中计算机视觉基础部分的学习笔记该部分为实现车道线图像识别功能的基础课程关于本课程的详细说明请参考优达学城官网优达学城为学员提供了一个简短的Github教
C++编程入门--矩阵类重载运算符

题目定义3 3矩阵类Matrix 在其中重载运算符实现矩阵的基本运算首先我们先确定这个矩阵类的基本功能我们来声明其成员函数的功能列出来如下 include
SQLi LABS Less-21

第21关使用POST请求提交参数对用户名和密码中的特殊字符进行了转译难度较大 21关的突破口在cookie 用户登录成功后将用户名进行base64加密后保存在cookie中点击提交按钮的时候会从cookie中获取保存的用户名使
矩阵矩阵的基本运算规则行列式逆矩阵

矩阵本质矩阵是个数表从线性变换的视角看矩阵是记录线性变换这一过程的描述信息记为 A m n A m times n Am n 或 A a i j A a ij A aij 或 A a i j m n A a ij m times
RSA加密长度限制问题解决 BadPaddingException

Exception in thread main javax crypto BadPaddingException Decryption error at sun security rsa RSAPadding unpadV15 RSAPa
python爬取数据存入excel_将爬取的数据保存到Excel表格

第一步导入模块 import xlwt 导入写入excel需要的包第二步定义函数将爬取好的数据保存到excel文件中下面以保存python的关键词为例介绍详细流程 def write to excel filename lst
蓝牙-基础篇-蓝牙简介

文章目录蓝牙特点蓝牙功能蓝牙的两种技术蓝牙特点低功耗短距离跨设备蓝牙功能跨设备传输流式音频跨设备传输数据广播信息蓝牙的两种技术传统蓝牙技术蓝牙版本2 0 2 1 即Basic Rate Enhanced Data
【小沐学C#】C#逆向反编译工具：JetBrains dotPeek

论道篇一天戈戈来到江边静坐凝思一手放着风筝一手钓着鱼微风徐徐水面粼粼柳枝招摇戈戈论语读了许多天可有心得狄狄错误要么是过了要么是不及重要的就是把握住度戈戈程朱理学常说格物致知那些红绿线平时可格出了些什么
C语言程序设计程序设计与C语言

1 计算机与程序程序设计语言机器语言又称低级语言意思是贴近计算机硬件的语言是一个型号机器语言的指令的集合是紧密依赖于计算机的硬件高级语言用于程序设计编译系统的软件事先把高级语言编写的程序翻译成机器语言程序 2 C语言的出现和发
three.js 内置的几何体Geometry

案例效果所有案例效果地址前言前面我们了解了一个three js三大基础renderer camera scene和响应式three js 现在我们来学习一下three js内置的geometry three js提供了很多的几何体给

three.js 内置的几何体Geometry

案例效果

前言

three.js 内置的几何体Geometry 的相关文章

随机推荐

热门标签