凸面体

作者: Codifier | 来源:发表于2019-11-12 16:37 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Convex Geometry</title>
        <script src="../../three-part/threejs/three.js"></script>
        <script src="../../three-part/threejs/ConvexGeometry.js"></script>
        <script src="../../three-part/threejs/ConvexHull.js"></script>
        <script src="../../three-part/utils/stats.min.js"></script>
        <script src="../../three-part/utils/dat.gui.min.js"></script>
        <script src="../controls/TrackballControls.js"></script>
        <script src="../util/util.js"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <div id="container"></div>
    <script type="text/javascript">
        init();
        function init() {
            // show FPS
            let stats = initStats();
            // resize
            window.addEventListener('resize', onResize, false);
    
            let scene = new THREE.Scene();
            let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position);
    
            let renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(new THREE.Color(0x000000));
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            document.getElementById("container").appendChild(renderer.domElement);
    
            // init trackball control
            let trackballControls = initTrackballControls(camera, renderer);
            let clock = new THREE.Clock();
    
            // add ambient light
            let ambientLight = new THREE.AmbientLight("#606008", 1);
            scene.add(ambientLight);
    
            let directionalLight = new THREE.DirectionalLight("#ffffff");
            directionalLight.position.set(-10, 50, -10);
            directionalLight.intensity = 2;
            directionalLight.castShadow = true;
            scene.add(directionalLight);
    
            // add a plane
            let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
            let planeMaterial = new THREE.MeshLambertMaterial({
                color: 0xffffff
            });
            let plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true;
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.set(0, -20, 0);
            scene.add(plane);
    
            let group = null;
            generateConvex(group);
    
            // attributes which can be modified in GUI
            const controls = {
    
            };
            // init GUI
            initGUI();
    
            renderScene();
    
            function initGUI(){
                let gui = new dat.GUI();
            }
    
            function generateConvex(group) {
                if (group) scene.remove(group);
                // random point
                let points = [];
                for (let i = 0; i < 20; i++) {
                    let randomX = -15 + Math.round(Math.random() * 30);
                    let randomY = -15 + Math.round(Math.random() * 30);
                    let randomZ = -15 + Math.round(Math.random() * 30);
                    points.push(new THREE.Vector3(randomX, randomY, randomZ));
                }
                group = new THREE.Object3D();
                let material = new THREE.MeshBasicMaterial({
                    color: 0xff0000,
                    transparent: false
                });
                points.forEach(v => {
                    let spGeom = new THREE.SphereGeometry(0.2);
                    let spMesh = new THREE.Mesh(spGeom, material);
                    spMesh.position.copy(v);
                    group.add(spMesh);
                });
                scene.add(group);
    
                /**
                 * ConvexGeometry( points : Array )
                 * points — Array of Vector3s that the resulting convex hull will contain.
                 * @type {THREE.ConvexGeometry}
                 */
                let convexGeometry = new THREE.ConvexGeometry(points);
                convexGeometry.computeVertexNormals();
                convexGeometry.computeFaceNormals();
                convexGeometry.normalsNeedUpdate = true;
                let convexMaterial = new THREE.MeshLambertMaterial({
                    color: 0x0000ff
                });
                let convexMesh = new THREE.Mesh(convexGeometry, convexMaterial);
                convexMesh.castShadow = true;
                scene.add(convexMesh);
            }
    
            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
    
            function renderScene(){
                trackballControls.update(clock.getDelta());
                stats.update();
                requestAnimationFrame(renderScene);
                renderer.render(scene, camera);
            }
        }
    </script>
    </body>
    </html>
    

    运行结果:



    总结:
    创建ConvexGeometry之前需要引入ConvexGeometry.js和ConvexHull.js。

    相关文章

      网友评论

          本文标题:凸面体

          本文链接:https://www.haomeiwen.com/subject/xnsqictx.html