three.js 绘制空心半圆

最新推荐文章于 2024-05-30 17:57:45 发布
zhuoyunluo77
最新推荐文章于 2024-05-30 17:57:45 发布
阅读量691
点赞数
分类专栏： three.js 文章标签： javascript html
本文链接：https://blog.csdn.net/w__qwwq/article/details/126727966
版权
three.js 专栏收录该内容
14 篇文章 2 订阅
订阅专栏
一、效果图：

在这里插入图片描述
二、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制空心半圆</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body{
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script src="js/stats.min.js"></script>
    <script>
        var container,stats;
        var camera, scene, renderer;
        var group;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0;
        var mouseXOnMouseDown = 0;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();
        function  init()
        {
            //创建元素
            container = document.createElement('div');
            document.body.appendChild(container);

            var info = document.createElement('div');
            info.style.position = 'absolute';
            info.style.top = '10px';
            info.style.width = '100%';
            info.style.textAlign = 'center';
            info.innerHTML = 'Simple procedurally generated 3D shapes <br/>Drag to spin';
            container.appendChild(info);

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.set(0,150,500);
            scene.add(camera);

            var light = new THREE.PointLight(0xffffff,0.8);
            camera.add(light);

            group = new THREE.Group();
            group.position.y = 50;
            scene.add(group);

            // var texture = THREE.ImageUtils.loadTexture("textures/UV_Grid_Sm.jpg");
            // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            // texture.repeat.set(0.008,0.008);

            //创建一个自定义的形状
            // x,y,z 是整个Mesh的位置
            // rx ry rz
            // THREE.Line 是 THREE.Mesh
            function addShape( shape, color, x, y, z, rx, ry, rz, s ) {

                //统一绘制，返回所有生成的点
                var points = shape.createPointsGeometry(25);  // 5 表示被切分成 5 段，参数值越大，曲线越光滑

                var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color} ) );
                line.position.set( x, y, z - 25 );
                line.rotation.set( rx, ry, rz );
                line.scale.set( s, s, s );
                group.add( line );

            }


            // Circle

            var circleRadius = 180;
            var circleShape = new THREE.Shape();
             circleShape.moveTo( circleRadius ,0);
             circleShape.quadraticCurveTo( 0, circleRadius, -circleRadius, 0 );
             // moveTo circleRadius ,0
            // quadraticCurveTo   0, circleRadius, -circleRadius, 0 二次贝塞尔, 调用这两句生成命令


             addShape( circleShape, 0x00f000,  0,0, 0, 0, 0, 0, 1 );

            //

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setClearColor( 0xf0f0f0 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            container.appendChild( stats.domElement );

            document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        //

        function onDocumentMouseDown( event ) {

            event.preventDefault();

            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'mouseup', onDocumentMouseUp, false );
            document.addEventListener( 'mouseout', onDocumentMouseOut, false );

            mouseXOnMouseDown = event.clientX - windowHalfX;
            targetRotationOnMouseDown = targetRotation;

        }

        function onDocumentMouseMove( event ) {

            mouseX = event.clientX - windowHalfX;

            targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

        }

        function onDocumentMouseUp( event ) {

            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

        }

        function onDocumentMouseOut( event ) {

            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

        }

        function onDocumentTouchStart( event ) {

            if ( event.touches.length == 1 ) {

                event.preventDefault();

                mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;

            }

        }

        function onDocumentTouchMove( event ) {

            if ( event.touches.length == 1 ) {

                event.preventDefault();

                mouseX = event.touches[ 0 ].pageX - windowHalfX;
                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

            }

        }

        //

        function animate() {

            requestAnimationFrame( animate );

            render();
            stats.update();

        }

        function render() {

            group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
            renderer.render( scene, camera );

        }

    </script>

</body>
</html>