Forty-one Three.js Advanced geometry THREE.ConvexGeometry

Keywords: github

brief introduction

adopt THREE.ConvexGeometry , we can create a bump around a set of points. The so-called convex hull is the smallest figure surrounding this group of points. That is to say, all the points are in the body of the current model, and the current drawing is the smallest model.

Simple case

First, you need to have an array of vertex positions.
Then you can create a picture from this set of points

var convexGeometry = new THREE.ConvexGeometry(points);

A save vertex (type is THREE.Vector3 )The array of is THREE.ConvexGeometry Unique argument to the constructor.

Case code

First we need to generate some points, so the case uses the ball to create points to generate a bunch of points

Then, we use the location of these points to implement the case, and add two textures

Here is the full code

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;

        canvas {
            display: block;

<body onload="draw();">

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
    var renderer;
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth, window.innerHeight);

    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);

    function initModel() {

    //Methods to generate model calls
    function generatePoints() {
        // Randomly generate a set of vertices
        var points = [];
        for (var i = 0; i < 20; i++) {
            //The position of the coordinate point of the xyz axis will be randomly generated within + - 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);

            //Create a coordinate point and add it to the array
            points.push(new THREE.Vector3(randomX, randomY, randomZ));

        //Declare a mesh object that holds all points
        spGroup = new THREE.Object3D();
        //Declare a mesh base material
        var material = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: false});
        //Traversing the array to generate small ball points and adding them to the object
        points.forEach(function (point) {

            var spGeom = new THREE.SphereGeometry(2);
            var spMesh = new THREE.Mesh(spGeom, material);
            spMesh.position.copy(point); //Set the position of the current ball to the coordinates of the current point
        // Add objects that hold all points to the scene

        // Use these points to instantiate a THREE.ConvexGeometry Geometry objects
        var hullGeometry = new THREE.ConvexGeometry(points);
        //Build model
        hullMesh = createMesh(hullGeometry);
        //Add to scene

    function createMesh(geom) {

        // Instantiate a green, translucent material
        var meshMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, opacity: 0.2});
        meshMaterial.side = THREE.DoubleSide; //Set the material to be visible on both sides
        var wireFrameMat = new THREE.MeshBasicMaterial();
        wireFrameMat.wireframe = true; //Render materials as wireframes

        // Assign both materials to geometry
        var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

        return mesh;

    //Initialize performance plug-ins
    var stats;
    function initStats() {
        stats = new Stats();

    //User interaction plug in left mouse button press and hold rotation, right mouse button press and hold translation, scroll wheel zoom
    var controls;
    function initControls() {

        controls = new THREE.OrbitControls( camera, renderer.domElement );

        // If you use the animate method, delete this function
        //controls.addEventListener( 'change', render );
        // Whether there is inertia in the meaning of damping or rotation when the animation is recycled
        controls.enableDamping = true;
        //Dynamic damping coefficient is the mouse drag rotation sensitivity
        //controls.dampingFactor = 0.25;
        //Can I zoom
        controls.enableZoom = true;
        //Auto rotate or not
        controls.autoRotate = true;
        //Set the maximum distance between the camera and the origin
        controls.minDistance  = 200;
        //Set the maximum distance between the camera and the origin
        controls.maxDistance  = 1600;
        //Enable right drag
        controls.enablePan = true;

    function render() {
        renderer.render( scene, camera );

    //Function triggered by window change
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        renderer.setSize( window.innerWidth, window.innerHeight );


    function animate() {
        //Update controller

        //Update performance plug-ins

    function draw() {

        window.onresize = onWindowResize;

Posted by BLeez on Sun, 31 May 2020 09:13:58 -0700