34-THREE.JS 游泳圈 

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.08 - Basic 3D geometries - Torus</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 torus = createMesh(new THREE.TorusGeometry(10, 10, 8, 6, Math.PI * 2));
        // 创建一个游泳圈 把它添加到场景中去
        scene.add(torus);

        // 设置相机的坐标和朝向
        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.radius = torus.children[0].geometry.parameters.radius;
            this.tube = torus.children[0].geometry.parameters.tube;
            this.radialSegments = torus.children[0].geometry.parameters.radialSegments;
            this.tubularSegments = torus.children[0].geometry.parameters.tubularSegments;
            this.arc = torus.children[0].geometry.parameters.arc;

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

                torus = createMesh(new THREE.TorusGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), controls.arc));
                // add it to the scene.
                scene.add(torus);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'tube', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'radialSegments', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'tubularSegments', 1, 20).onChange(controls.redraw);
        gui.add(controls, 'arc', 0, Math.PI * 2).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();

            torus.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:15  -韩帅  阅读(135)  评论(0)    收藏  举报

导航