28-THREE.JS 扇形圆形 

<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>
    <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<div id="WebGL-output">
</div>
<script type="text/javascript">

    // 初始化
    function init() {

        var stats = initStats();

        // 创建一个场景
        var scene = new THREE.Scene();

        // 创建一个相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建一个渲染器
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        var circle = createMesh(new THREE.CircleGeometry(4, 10, 0.3 * Math.PI * 2, 0.3 * Math.PI * 2));
        // 把圆形添加到场景中去
        scene.add(circle);

        // 设置相机的坐标
        camera.position.x = -20;
        camera.position.y = 30;
        camera.position.z = 40;
        camera.lookAt(new THREE.Vector3(10, 0, 0));


        // 添加聚光灯
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        scene.add(spotLight);

        // 把渲染后的结果放到DOM元素中去
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        
        var step = 0;


        
        var controls = new function () {


            console.log(circle.children[0].geometry);
            this.radius = 4;

            this.thetaStart = 0.3 * Math.PI * 2;
            this.thetaLength = 0.3 * Math.PI * 2;
            this.segments = 10;

            this.redraw = function () {
                // remove the old plane
                scene.remove(circle);
                // create a new one
                circle = createMesh(new THREE.CircleGeometry(controls.radius, controls.segments, controls.thetaStart, controls.thetaLength));
                // add it to the scene.
                scene.add(circle);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'segments', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'thetaStart', 0, 2 * Math.PI).onChange(controls.redraw);
        gui.add(controls, 'thetaLength', 0, 2 * Math.PI).onChange(controls.redraw);
        render();

        function createMesh(geom) {

            //  两种材质
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;

            // 混合材质
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);


            return mesh;
        }

        function render() {
            stats.update();

            circle.rotation.y = step += 0.01;
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>

　　

posted on 2018-10-31 10:38  -韩帅  阅读(562)  评论(0)  编辑  收藏  举报

导航