35-THREE.JS 多面体

最新推荐文章于 2023-06-06 19:15:07 发布

weixin_30374009

最新推荐文章于 2023-06-06 19:15:07 发布

阅读量355

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shuaihan/p/9882042.html

版权

<!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 polyhedron = createMesh(new THREE.IcosahedronGeometry(10, 0));
        // 创建一个多面体
        scene.add(polyhedron);

        // 设置照相机的位置和朝向
        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 = 10;
            this.detail = 0;
            this.type = 'Icosahedron';


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

                switch (controls.type) {
                    case 'Icosahedron':
                        polyhedron = createMesh(new THREE.IcosahedronGeometry(controls.radius, controls.detail));
                        break;
                    case 'Tetrahedron':
                        polyhedron = createMesh(new THREE.TetrahedronGeometry(controls.radius, controls.detail));
                        break;
                    case 'Octahedron':
                        polyhedron = createMesh(new THREE.OctahedronGeometry(controls.radius, controls.detail));
                        break;
                    case 'Dodecahedron':
                        polyhedron = createMesh(new THREE.DodecahedronGeometry(controls.radius, controls.detail));
                        break;
                    case 'Custom':
                        var vertices = [
                            1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1
                        ];

                        var indices = [
                            2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1
                        ];

                        polyhedron = createMesh(new THREE.PolyhedronGeometry(vertices, indices, controls.radius, controls.detail));
                        break;
                }

                // 把它添加到场景中去
                scene.add(polyhedron);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radius', 0, 40).step(1).onChange(controls.redraw);
        gui.add(controls, 'detail', 0, 3).step(1).onChange(controls.redraw);
        gui.add(controls, 'type', ['Icosahedron', 'Tetrahedron', 'Octahedron', 'Dodecahedron', 'Custom']).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();

            polyhedron.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>

转载于:https://www.cnblogs.com/shuaihan/p/9882042.html

weixin_30374009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
35-THREE.JS 多面体

<!DOCTYPE html><html><head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="htt...
复制链接

扫一扫