73 Three.js import model in PLY format

brief introduction

The full name of PLY format is Polygon file format, which is usually used to save the information of 3D scanner. This format only saves geometry data, without texture color.

Implementation case

Case view address:

First, introduce script loader

<script src="/lib/js/loaders/PLYLoader.js"></script>

Then, we instantiate the loader object and load the model. In the PLY model, only the geometry is saved, so we instantiate a texture and add it to the scene.

        var loader = new THREE.PLYLoader();
        loader.load("/lib/models/ply/binary/Lucy100k.ply", function (geometry) {

            //Update normal vector of vertex
            geometry.computeVertexNormals();

            //Create a texture and add the model to the scene channel
            var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
            var mesh = new THREE.Mesh( geometry, material );
            mesh.rotation.y = Math.PI;
            mesh.scale.set(0.05, 0.05, 0.05);
            scene.add( mesh );
        });

Case code

<!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/loaders/PLYLoader.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);
        //Tell the renderer you need shadow effects
        renderer.setClearColor(0xffffff);
        document.body.appendChild(renderer.domElement);
    }

    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
        camera.position.set(0, 40, 50);
        camera.lookAt(new THREE.Vector3(0,0,0));
    }

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

    //Initialize dat.GUI to simplify the test process
    var gui;
    function initGui() {
        //Declare an object to save the relevant data of the requirement modification
        gui = {
        };
        var datGui = new dat.GUI();
        //Add the setting attribute to the GUI, gui.add (object, attribute, min, max)
    }

    var light;
    function initLight() {
        scene.add(new THREE.AmbientLight(0x444444));

        light = new THREE.PointLight(0xffffff);
        light.position.set(0,50,50);

        //Tell directional light to turn on shadow casting
        light.castShadow = true;

        scene.add(light);
    }

    function initModel() {

        //Auxiliary tools
        var helper = new THREE.AxesHelper(50);
        scene.add(helper);

        var loader = new THREE.PLYLoader();
        loader.load("/lib/models/ply/binary/Lucy100k.ply", function (geometry) {

            //Update normal vector of vertex
            geometry.computeVertexNormals();

            //Create a texture and add the model to the scene channel
            var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
            var mesh = new THREE.Mesh( geometry, material );
            mesh.rotation.y = Math.PI;
            mesh.scale.set(0.05, 0.05, 0.05);
            scene.add( mesh );
        });
    }

    //Initialize performance plug-ins
    var stats;
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    //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;
        controls.autoRotateSpeed = 0.5;
        //Set the maximum distance between the camera and the origin
        controls.minDistance  = 1;
        //Set the maximum distance between the camera and the origin
        controls.maxDistance  = 200;
        //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;
        camera.updateProjectionMatrix();
        render();
        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function animate() {
        //Update controller
        render();

        //Update performance plug-ins
        stats.update();

        controls.update();

        requestAnimationFrame(animate);
    }

    function draw() {
        initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();

        animate();
        window.onresize = onWindowResize;
    }
</script>
</html>

Posted by Delqath on Sat, 04 Apr 2020 07:24:17 -0700

Programmer Group

73 Three.js import model in PLY format

brief introduction

Implementation case

Case code

Hot Keywords