如何在JavaScript项目中使用THREE.MeshLine？附报错修复示例

Hey there! Let's get that resizable line working properly. Here's a breakdown of what was causing your errors, plus a complete, standalone HTML file you can run directly:

What Was Going Wrong? #

1. Require.js Error: The MeshLine version you were trying to use expects a module loader like require.js, which your setup wasn't configured for. We'll use the modern ES Module version of MeshLine that works directly in browsers.
2. container is not defined: When you add type="module", JavaScript runs in strict mode—you can't use undeclared variables. We'll fix this by properly declaring all variables with let or const.

Complete Working Code #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resizable Three.js Line with MeshLine</title>
    <style>
        body { margin: 0; overflow: hidden; }
    </style>
</head>
<body>
    <script type="module">
        // Import Three.js and MeshLine modules from CDNs
        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js';
        import { MeshLine, MeshLineMaterial } from 'https://cdn.jsdelivr.net/npm/meshline@3.1.6/dist/meshline.module.js';

        // Declare all variables properly to avoid scope errors
        let container, camera, scene, renderer, lineMesh;

        function init() {
            // Create container for our scene
            container = document.createElement('div');
            document.body.appendChild(container);

            // Set up camera
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.set(0, 0, 150);

            // Create scene
            scene = new THREE.Scene();
            scene.add(camera);

            // Set up renderer
            renderer = new THREE.WebGLRenderer({ clearAlpha: 1 });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0xcaffee, 1);
            container.appendChild(renderer.domElement);

            // Create points for our line
            const points = [];
            points.push(new THREE.Vector3(-50, 0, 0));
            points.push(new THREE.Vector3(50, 0, 0));

            // Initialize MeshLine and set its points
            const line = new MeshLine();
            line.setPoints(points);

            // Create MeshLine material with adjustable width
            const material = new MeshLineMaterial({
                color: new THREE.Color(0xff0000),
                lineWidth: 10, // Use a reasonable number here—MeshLine supports proper width values!
                transparent: true,
                opacity: 1
            });

            // Create mesh from MeshLine geometry and material, add to scene
            lineMesh = new THREE.Mesh(line.geometry, material);
            scene.add(lineMesh);

            // Handle window resizing
            window.addEventListener('resize', onWindowResize);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

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

        // Start everything up
        init();
        animate();
    </script>
</body>
</html>

Key Changes to Note #

• ES Modules: We use type="module" and import Three.js/MeshLine directly from their CDN ES module builds, no require.js needed.
• Proper Variable Declarations: All variables like container, camera, etc., are declared with let to avoid strict mode errors.
• MeshLine Setup: Replaced THREE.Line and LineBasicMaterial with MeshLine and MeshLineMaterial—this lets you set a real line width (no more giant numbers that don't work!).
• Resize Handling: Added a handler to adjust the camera and renderer when the window size changes, so your line stays properly scaled.

Just save this as an HTML file and open it in any modern browser—it should work immediately!

内容的提问来源于stack exchange，提问作者Alex