threejs学习笔记02--画线

最新推荐文章于 2025-02-10 14:17:30 发布

weixin_30466039

最新推荐文章于 2025-02-10 14:17:30 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Webyangbowen/p/8044199.html

本文介绍如何使用Three.js创建一个带有颜色渐变效果的3D线条。通过定义几何体、线条材质及顶点颜色，实现从一端到另一端颜色平滑过渡的3D线条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
<div id="canvas-frame"></div>

<script src="js/three.js"></script>
<script>
    //定义一些需要的变量
    var renderer, camera, scene, light, object;
    var width, height;
    function initThree(){
        width = document.getElementById('canvas-frame').clientWidth;
        height=document.getElementById('canvas-frame').clientHeight;
        renderer= new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(width,height);
        document.getElementById('canvas-frame').appendChild(renderer.domElement);
        renderer.setClearColor(0xFFFFFF, 1.0);
    }
    //定义相机
    function initCamera(){
        camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
        camera.position.x=0;
        camera.position.y=1000;
        camera.position.z=0;
        camera.up.x=0;
        camera.up.y=0;
        camera.up.z=1;
        camera.lookAt({
            x:0,
            y:0,
            z:0
        });
    }

    function initScene(){
        scene = new THREE.Scene();
    }

    function initLight(){
        light = new THREE.DirectionalLight(0xFF0000,1.0,0);
        light.position.set(100,100,200);
        scene.add(light);
    }

    var cube;
    function initObject(){
        //生命一个几何体
        var geometry = new THREE.Geometry();
        //定义一种线条的材质,使用THREE.LineBasicMaterial类型来定义，它接受一个集合作为参数
        /*
        * LineBasicMaterial( parameters )
         Parameters是一个定义材质外观的对象，它包含多个属性来定义材质，这些属性是：
         Color：线条的颜色，用16进制来表示，默认的颜色是白色。
         Linewidth：线条的宽度，默认时候1个单位宽度。
         Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了。
         Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角。
         VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。（如果关于插值不是很明白，可以QQ问我，QQ在前言中你一定能够找到，嘿嘿，虽然没有明确写出）。
         Fog：定义材质的颜色是否受全局雾效的影响。
         好了，介绍完这些参数，你可以试一试了，在课后，我们会展示不同同学的杰出作品。下面，接着上面的讲，我们这里使用了顶点颜色vertexColors: THREE.VertexColors，就是线条的颜色会根据顶点来计算。
         var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
        * */
        var material = new THREE.LineBasicMaterial({vertexColors:true});
        var color1 = new THREE.Color(0x444444),color2=new THREE.Color(0xFF0000);

        //线的材质可以由2店的颜色决定
        //定义两种颜色，分别表示线条两个端点的颜色
        var p1 = new THREE.Vector3(-100,0,100);
        var p2 = new THREE.Vector3(100,0,-100);
        //几何体里面有一个vertices变量，可以用来存放点。
        // 定义2个顶点的位置，并放到geometry中
        geometry.vertices.push(p1);
        geometry.vertices.push(p2);
        //为4中定义的2个顶点，设置不同的颜色
        geometry.colors.push(color1,color2);
        //定义一条线
        //定义线条，使用THREE.Line类
        //第一个参数是几何体geometry，里面包含了2个顶点和顶点的颜色。第二个参数是线条的材质，或者是线条的属性，表示线条以哪种方式取色。第三个参数是一组点的连接方式
        var line = new THREE.Line(geometry,material,THREE.LinePieces);
        //把线加到场景里
        scene.add(line);
    }

    function threeStart() {
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        renderer.clear();
        renderer.render(scene, camera);
    }

    window.onload=threeStart();
</script>
</body>
</html>

转载于:https://www.cnblogs.com/Webyangbowen/p/8044199.html