<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程018 - three.js自定义图形的线条宽度和颜色</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
    <script src="ThreeJS/LineSegmentsGeometry.js"></script>
    <script src="ThreeJS/LineMaterial.js"></script>
    <script src="ThreeJS/LineGeometry.js"></script>
    <script src="ThreeJS/LineSegments2.js"></script>
    <script src="ThreeJS/Line2.js"></script>
    <script src="ThreeJS/GeometryUtils.js"></script>
    <script src="ThreeJS/OrbitControls.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script>
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        $("#myContainer").append(myRenderer.domElement);
        var myScene = new THREE.Scene();
        myScene.background = new THREE.Color('white');
        var myCamera = new THREE.PerspectiveCamera(40,
            window.innerWidth / window.innerHeight, 1, 1000);
        myCamera.position.set(- 50, 0, 60);
        myScene.add(myCamera);
        var myOrbitControls =
            new THREE.OrbitControls(myCamera, $("#myContainer")[0]);
        //自定义图形的线条宽度和颜色
        var myPositions = [];
        var myColors = [];
        var myPoints = THREE.GeometryUtils.hilbert3D(new THREE.Vector3(0, 0, 0));
        /*
           三维样条曲线CatmullRomCurve3
           在三维空间中随意设置几个顶点坐标，然后作为三维样条曲线CatmullRomCurve3的参数，你就可以生成一条穿过这几个点的光滑曲线。
           CatmullRomCurve3的参数是三维向量对象Vector3构成的数组。
           // 三维向量Vector3创建一组顶点坐标
           const arr = [
               new THREE.Vector3(-50, 20, 90),
               new THREE.Vector3(-10, 40, 40),
               new THREE.Vector3(0, 0, 0),
               new THREE.Vector3(60, -60, 0),
               new THREE.Vector3(70, 0, 80)
           ]
           // 三维样条曲线
           const curve = new THREE.CatmullRomCurve3(arr);
        */
        var myCurve = new THREE.CatmullRomCurve3(myPoints);
        var divisions = Math.round(12 * myPoints.length);
        var myPoint = new THREE.Vector3();
        var myColor = new THREE.Color();
        for (var i = 0, l = divisions; i < l; i++) {
            var t = i / l;
            myCurve.getPoint(t, myPoint);
            myPositions.push(myPoint.x, myPoint.y, myPoint.z);
            myColor.setHSL(t, 1.0, 0.5);
            myColors.push(myColor.r, myColor.g, myColor.b);
        }
        var myGeometry = new THREE.LineGeometry();
        myGeometry.setPositions(myPositions);
        myGeometry.setColors(myColors);
        var myMaterial = new THREE.LineMaterial({ linewidth: 18, vertexColors: true });
        var myLine = new THREE.Line2(myGeometry, myMaterial);
        myLine.scale.set(2, 2, 2);
        myMaterial.resolution.set(window.innerWidth, window.innerHeight);
        myScene.add(myLine);
        //渲染图形
        animate();
        function animate() {
            myRenderer.render(myScene, myCamera);
            requestAnimationFrame(animate);
        }
    </script>
</body>

</html>

# javascript
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局