关于javascript:ThreeJS学习记录一渐变的线

59次阅读

共计 1765 个字符，预计需要花费 5 分钟才能阅读完成。

形式：百度进去的例子，本人改改。原例子：https://wow.techbrood.com/fid…。他这里是依据有多少个定点，渲染多少段色彩， 如果须要实现突变的线，则须要增加很多个定点，比方我这里增加了 6 个点造成的直线，再 push 六个色彩就好了。
* 留神：必须要这个例子中 73 版本的 ThreeJS 文件能力胜利渲染。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - lines - colors</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>
    <script src="./three.73.js"></script>


    <script type="module">
        // 创立场景对象 Scene
        const scene = new THREE.Scene();
        // 创立相机对象 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // 创立渲染器对象
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染区域尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);

        //body 元素中插入 canvas 对象
        document.body.appendChild(renderer.domElement);

        // 次要代码————————————————
        function initObject() {var geometry = new THREE.Geometry(); console.log(geometry)
            var material = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors});
            var color1 = new THREE.Color(0x444444),
                color2 = new THREE.Color(0xFF0000),
                color3 = new THREE.Color(0x0000CD),
                color4 = new THREE.Color(0x9932CC),
                color5 = new THREE.Color(0x00FFFF),
                color6 = new THREE.Color(0x00FF7F);

            // 线的材质能够由多点的色彩决定
            var p1 = new THREE.Vector3(0, 0, -100);
            var p2 = new THREE.Vector3(50, 0, -100);
            var p3 = new THREE.Vector3(100, 0, -100);
            var p4 = new THREE.Vector3(150, 0, -100);
            var p5 = new THREE.Vector3(200, 0, -100);
            var p6 = new THREE.Vector3(250, 0, -100);
            geometry.vertices.push(p1);
            geometry.vertices.push(p2);
            geometry.vertices.push(p3);
            geometry.vertices.push(p4);
            geometry.vertices.push(p5);
            geometry.vertices.push(p6);
            geometry.colors.push(color1, color2, color3, color4, color5, color6);

            var line = new THREE.Line(geometry, material);
            scene.add(line);
        }
        initObject();





        // 设置相机地位
        camera.position.z = 40;
        // 执行渲染操作
        renderer.render(scene, camera);
    </script>
</body>

</html>

实现计划 2——

正文完