33-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 cylinder = createMesh(new THREE.CylinderGeometry(20, 20, 20));
        // 把圆柱体添加到场景中
        scene.add(cylinder);

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

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

       
        var step = 0;


        
        var controls = new function () {
            this.radiusTop = 20;
            this.radiusBottom = 20;
            this.height = 20;

            this.radialSegments = 8;
            this.heightSegments = 8;

            this.openEnded = false;

            this.redraw = function () {
                // remove the old plane
                scene.remove(cylinder);
                // create a new one

                cylinder = createMesh(new THREE.CylinderGeometry(controls.radiusTop, controls.radiusBottom, controls.height, controls.radialSegments, controls.heightSegments, controls.openEnded));
                // add it to the scene.
                scene.add(cylinder);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radiusTop', -40, 40).onChange(controls.redraw);
        gui.add(controls, 'radiusBottom', -40, 40).onChange(controls.redraw);
        gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'radialSegments', 1, 20).step(1).onChange(controls.redraw);
        gui.add(controls, 'heightSegments', 1, 20).step(1).onChange(controls.redraw);
        gui.add(controls, 'openEnded').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();

            cylinder.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 11:11  -韩帅  阅读(195)  评论(0)  编辑  收藏  举报

导航