visgl / deck.gl

WebGL2 powered visualization framework
https://deck.gl
MIT License
12.2k stars 2.09k forks source link

[Bug] Null loader when trying to load a PLY file #6838

Closed John2397 closed 2 years ago

John2397 commented 2 years ago

Description

I am trying to load a PLY file on the map, using Mapbox GL JS. This is the error I receive: Error: loading data of PointCloudLayer({id: 'deckgl-PointCloudLayer2'}): null loader although I do load the loaders.

This is the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/deck.gl@8.7/dist.min.js" ></script>
    <script src="https://unpkg.com/@loaders.gl/gltf@3.0/dist/dist.min.js" ></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<pre id="info"></pre>
<script>
    const {MapboxLayer, PointCloudLayer, COORDINATE_SYSTEM } = deck;
    const {PLYLoader} = loaders;

    let ply_pointcloud = new MapboxLayer({
        id: 'deckgl-PointCloudLayer2',
        type: PointCloudLayer,
        data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/point-cloud-ply/lucy100k.ply',
        getColor: [255, 255, 255],
        getNormal: [0, 1, 0],
        coordinateOrigin: [-122.4, 37.74],
        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
        opacity: 0.5,
        loaders: [PLYLoader],
        pointSize: 0.5

    });

    mapboxgl.accessToken = 'pk.eyJ1IjoiZ2VvcmdlMjMyMyIsImEiOiJja2MwZmxjbGYxajF4MnJsZ2pzbjhjdHc2In0.znh7LExrIEsKBB7SWYJ3hg';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 14,
        maxPitch: 55,
        center: [-122.4, 37.74]
    });

    map.on('load', function() {
        map.addLayer(ply_pointcloud)
    });
</script>

</body>
</html>

This is a Codepen with the above code that demonstrates the problem (Nothing appears on the map)

The error mentioned above is displayed on Google Chrome's console but not in codepen's console

And just for reference, this is a Codepen that works as expected when loading a json file as a pointcloud

Flavors

Expected Behavior

To load the PLY file on the map

Steps to Reproduce

See description

Environment

Logs

No response

Pessimistress commented 2 years ago

You are not including the ply loader module (https://unpkg.com/@loaders.gl/ply@^3.0.0/dist/dist.min.js).

Please use discussions if you need further help debugging your own application.