Webgl学习日志（六）——高级几何体（ConvexGeometry）

最新推荐文章于 2020-11-23 23:56:14 发布

niuge No.1

最新推荐文章于 2020-11-23 23:56:14 发布

阅读量1.1k

点赞数

分类专栏： webgl

本文链接：https://blog.csdn.net/niuge8905/article/details/79915109

版权

webgl 专栏收录该内容

37 篇文章 14 订阅

订阅专栏

在高级几何体中的THREE.ConvexGeometry(points)是一个很有用的函数。他可以把随机的点连起来做成一个封闭的几何体。

先看效果：

然后看代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="js/three.js"></script>
    <script src="js/stats.js"></script>
    <script src="js/Tween.js"></script>
    <script src="js/dat.gui.js"></script>
    <script src="js/ThreeBSP.js"></script>
    <script src="js/ConvexGeometry.js"></script>
    <script src="js/QuickHull.js"></script>
    <script src="js/SceneUtils.js"></script>
    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
    <script>
        function initTween() {
            new TWEEN.Tween(mesh.position)
                    .to({ x: -400 }, 3000).repeat(Infinity).start();
        }
       
        var controls;
        var renderer;
        var stats;
        function initThree() {
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xFFFFFF, 1.0);

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            document.getElementById('canvas-frame').appendChild(stats.domElement);

            controls = new function () {
                this.rotationSpeed = 0.1;
                this.bouncingSpeed = 0.1;
            }

            var gui = new dat.GUI();
            gui.add(controls, 'rotationSpeed', 0, 0.5);
            gui.add(controls, 'bouncingSpeed', 0, 0.5);
        }

        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            camera.position.x = 600;
            camera.position.y = 0;
            camera.position.z = 600;
            camera.up.x = 0;
            camera.up.y = 1;
            camera.up.z = 0;
            camera.lookAt(0,0,0);
        }

        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }

        var light;
        function initLight() {
            light = new THREE.AmbientLight(0xFF0000);
            light.position.set(100, 100, 200);
            scene.add(light);
            light = new THREE.PointLight(0x00FF00);
            light.position.set(0, 0, 300);
            scene.add(light);
        }
        function randomPoint() {

            return new THREE.Vector3(THREE.Math.randFloat(-1, 1)*60, THREE.Math.randFloat(-1, 1)*60, THREE.Math.randFloat(-1, 1)*60);
        }

        function createMesh(geometry)
        {
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireframeMaterial = new THREE.MeshBasicMaterial();
            wireframeMaterial.wireframe = true;

            var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [meshMaterial, wireframeMaterial]);
            return mesh;
        }
        var cube;
        var mesh;
        var mesh2;        
        function initObject() {
            var points = [];
            var material = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: false });
            mesh = new THREE.Object3D();
            for(var i=0;i<15;i++)
            {
                var point = randomPoint();                
                points.push(point);
            }
            var converGeometry = new THREE.ConvexGeometry(points);
            mesh = createMesh(converGeometry);
            scene.add(mesh);
        }        

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            animation();
            initTween();

        }
        function animation() {
            mesh.rotation.x += controls.rotationSpeed;
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
            stats.update();
            //TWEEN.update();
        }

    </script>
</head>

<body οnlοad="threeStart();">
    <div id="canvas-frame"></div>
</body>
</html>

在这段代码中，var converGeometry = new THREE.ConvexGeometry(points); mesh = createMesh(converGeometry);这两行代码和方法生成了这样一个闭包的几何体。

因此，可以想到很多其他软件生成的不规则的几何体可以用这个方法来把几何体还原。

同样的，也可以用在一定环境的不规则地形当中。

niuge No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webgl学习日志（六）——高级几何体（ConvexGeometry）

在高级几何体中的THREE.ConvexGeometry(points)是一个很有用的函数。他可以把随机的点连起来做成一个封闭的几何体。先看效果：然后看代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Three框架&lt;/title&gt;
复制链接

扫一扫