How to use THREE.MeshLine in my javascript project?

Question

When looking for a way to create a three.js line with a changed width I came across this article which suggests to use a THREE.MeshLine class from here. However, when trying to follow the documentation on how to use it in my script I got an error:

require.js:5 Uncaught Error: Module name "three" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at makeError (require.js:5)
    at Object.o [as require] (require.js:5)
    at requirejs (require.js:5)
    at test_line.html:13

Here are the lines of code I used in my script:

<html>
    <head>
        <script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
        <script src="https://raw.githubusercontent.com/spite/THREE.MeshLine/master/src/THREE.MeshLine.js"></script>
        <title>Test</title>
    </head>
    <body>  
        <script>
            var THREE = require( 'three' );
            var MeshLine = require( 'three.meshline' );
            ...

Do I miss something? (Hint: I am a beginner with javascript)

I also tried to follow the suggestions HERE, but as soon as I added type="module" in the script part I got an error container is not defined.

Here is a complete, stand-alone, static, easy, direct working html example of a single line in a browser window. I'd appreciate if the answer could contain a complete, stand-alone, static, easy, direct working example of the code fixed!

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
        <title>Test</title>
    </head>
    <body>
        
        <script>
            container = document.createElement('div');
            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.set(0, 0, 150);
            scene = new THREE.Scene();
            scene.add(camera);
            renderer = new THREE.WebGLRenderer({
                clearAlpha: 1
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0xcaffee, 1);
            document.body.appendChild(renderer.domElement);
            
            var material = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 10000000 } );
            var points = [];
            points.push( new THREE.Vector3(-50, 0, 0 ) );
            points.push( new THREE.Vector3( 50, 0, 0 ) );
            var geometry = new THREE.BufferGeometry().setFromPoints( points );
            var line = new THREE.Line( geometry, material );
            scene.add( line );
            renderer.render( scene, camera );
            
            animate();
            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
            }
            
        </script>
    </body>
</html>

Using the wide line implementation from the original repository might be easier: https://threejs.org/examples/webgl_lines_fat — Mugen87, Aug 30 '20 at 09:48
Sorry, there is no documentation. You have to study the code. — Mugen87, Aug 30 '20 at 10:11
So essentially you have to include a lot of extra code to set the linewidth? Is this a bug in the three.js code? I mean it must be as the documentation says otherwise. Also, the links I found are incorrect? They do not describe a working solution? — Alex, Aug 30 '20 at 15:11
This is not a bug. Yes, you have to import extra modules to get this work since an integration is too heavy for `WebGLRenderer`. However, we are talking about three additional imports. So I don't see the problem. — Mugen87, Aug 30 '20 at 16:10
@Mugen87 But how do I import these modules in the best way? I tried to to `import { GUI } from '../../three.js/examples/jsm/libs/dat.gui.module.js';` which resulted in an error `Cannot use import statement outside a module`. Do I have to copy all the required files manually? I tried that but got the same error! So how to import those modules? — Alex, Sep 05 '20 at 06:17
If this particular error pops up, it means you are using ES6 imports outside of a module context. Try to follow the approach from this article: https://jakearchibald.com/2017/es-modules-in-browsers/ — Mugen87, Sep 05 '20 at 12:50
But I need to import `js` modules, and the ECMA modules (whatever it is) are for `mjs`. Do I miss something here? Why not give a complete working example html that used three.js and the other modules so I can draw a single think line? That would be most direct, simple, easiest, usable, understandable, and performant answer! — Alex, Sep 05 '20 at 14:35

Paul Bollerman · Accepted Answer · 2022-10-26T14:57:17.787

Edit 2: As @user2589273 mentioned in the comment, this answer is no longer relevant, as the original repository (https://github.com/spite/THREE.MeshLine) has merged the below fork into the main repo. I will leave the answer below for posterity.

The Meshline repository you linked is not maintained any more and does not work with current three.js releases. Here is the maintained fork that I currently use: https://github.com/ryanking1809/threejs-meshline

It should work if you replace the link in your question with:

https://unpkg.com/threejs-meshline@2.0.11/src/index.js

Edit: with full working example:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
        <script src="https://unpkg.com/threejs-meshline@2.0.11/src/index.js"></script>
        <title>Test</title>
    </head>
    <body>

        <script>
            container = document.createElement('div');
            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.set(0, 0, 150);
            scene = new THREE.Scene();
            scene.add(camera);
            renderer = new THREE.WebGLRenderer({
                clearAlpha: 1
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0xcaffee, 1);
            document.body.appendChild(renderer.domElement);




            let points = [];
            points.push( new THREE.Vector3(-50, 0, 0 ) );
            points.push( new THREE.Vector3( 50, 0, 0 ) );
            const line = new MeshLine();
            line.setVertices(points);
            const material = new MeshLineMaterial();

            const mesh = new THREE.Mesh( line, material );
            scene.add( mesh );
            renderer.render( scene, camera );

            animate();
            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
            }

        </script>
    </body>
</html>

Just a note as of oct 22: The original meshline repo (https://github.com/spite/THREE.MeshLine) seems to have now been updated more recently than the one mentioned above — user2589273, Oct 25 '22 at 13:07

How to use THREE.MeshLine in my javascript project?

1 Answers1