Three.js on CodePen with PLYLoader

Question

I am preparing a CodePen for a question about Three.js's PLYLoader. Unfortunately I cannot get the CodePen working, no matter how I include Three.js I keep geting the error "Three is not defined".

This is the Codepen:

https://codepen.io/rowild/pen/mdZobaw

Currently, the scripts are implemented in the HTML part of the pen, which I have seen in many other examples, too. The error will eventually show up in the codeblock that starts with

const init = (plyModel, plyModelName) => {

at around line 85ff.

I do not see my mistake – could you help me find it, please?

(The question I am going to ask, once the Pen works, is how I can delete a PointCloud before loading a new one.)

Answer 1

Try like this

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.168.0/examples/jsm/"
    }
  }
</script>

//...

import * as THREE from 'three';
import { PLYLoader } from 'three/addons/loaders/PLYLoader.js';