32-THREE.JS 球体

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.05 - Basic 3D geometries - Sphere</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 sphere = createMesh(new THREE.SphereGeometry(4, 10, 10));
        // 把球体添加到场景中去
        scene.add(sphere);

        // 设置相机的坐标
        camera.position.x = -20;
        camera.position.y = 30;
        camera.position.z = 40;
        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 = sphere.children[0].geometry.parameters.radius;
            this.widthSegments = sphere.children[0].geometry.parameters.widthSegments;
            this.heightSegments = sphere.children[0].geometry.parameters.heightSegments;
            this.phiStart = 0;
            this.phiLength = Math.PI * 2;
            this.thetaStart = 0;
            this.thetaLength = Math.PI;


            this.redraw = function () {
                // remove the old plane
                scene.remove(sphere);
                // create a new one
                sphere = createMesh(new THREE.SphereGeometry(controls.radius, controls.widthSegments, controls.heightSegments, controls.phiStart, controls.phiLength, controls.thetaStart, controls.thetaLength));
                // add it to the scene.
                scene.add(sphere);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'widthSegments', 0, 20).onChange(controls.redraw);
        gui.add(controls, 'heightSegments', 0, 20).onChange(controls.redraw);
        gui.add(controls, 'phiStart', 0, 2 * Math.PI).onChange(controls.redraw);
        gui.add(controls, 'phiLength', 0, 2 * Math.PI).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();

            sphere.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>
猜你喜欢
