41 Three.js高级几何体THREE.ConvexGeometry

2018-02-12 18:46:21 人阅读

案例查看有问题?
全屏试试!

案例源代码


                        

 

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }
 
        canvas {
            display: block;
        }
 
    </style>
</head>
<body onload="draw();">
 
</body>
<script src="/lib/three.js"></script>
<script src="/lib/js/QuickHull.js"></script>
<script src="/lib/js/geometries/ConvexGeometry.js"></script>
<script src="/lib/js/controls/OrbitControls.js"></script>
<script src="/lib/js/libs/stats.min.js"></script>
<script src="/lib/js/libs/dat.gui.min.js"></script>
<script>
    var renderer;
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }
 
    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
        camera.position.set(0, 0, 600);
    }
 
    var scene;
    function initScene() {
        scene = new THREE.Scene();
    }
 
    var light;
    function initLight() {
        scene.add(new THREE.AmbientLight(0x404040));
 
        light = new THREE.DirectionalLight(0xffffff);
        light.position.set(1,1,1);
        scene.add(light);
    }
 
    function initModel() {
        generatePoints();
    }
 
    //生成模型调用的方法
    function generatePoints() {
        // 随机生成一组顶点
        var points = [];
        for (var i = 0; i < 20; i++) {
            //xyz轴的坐标点的位置会随机生成在+-150以内
            var randomX = -150 + Math.round(Math.random() * 300);
            var randomY = -150 + Math.round(Math.random() * 300);
            var randomZ = -150 + Math.round(Math.random() * 300);
 
            //创建一个坐标点并添加到数组当中
            points.push(new THREE.Vector3(randomX, randomY, randomZ));
        }
 
        //声明一个存放所有点的网格对象
        spGroup = new THREE.Object3D();
        //声明一个网格基础材质
        var material = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: false});
        //遍历数组生成小球点并添加到对象当中
        points.forEach(function (point) {
 
            var spGeom = new THREE.SphereGeometry(2);
            var spMesh = new THREE.Mesh(spGeom