03 Three.js绘制线

2018-02-09 17:39:10 人阅读

案例查看有问题?
全屏试试!

案例解析

 相对于上一节来说,只是模型方面有区别,这里是先使用线纹理的方法设置线的纹理,然后使用几何对象或者缓冲区几何对象生成顶点坐标,最后调用Line方法绘制出来线。

案例源代码


                        

 

 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/lib/three.js"></script>
    <style>
        body{margin:0;}
        canvas{width: 100%; height:100%; display: block;}
    </style>
</head>
<body>
<script>
    //创建场景
    var scene = new THREE.Scene();
    //设置相机(视野,显示口的宽高比,近裁剪面,远裁剪面)
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    //设置相机的视点
    camera.position.set(0,0,100);
    //设置相机的朝向
    camera.lookAt(new THREE.Vector3(0,0,0));
    //渲染器
    var renderer = new THREE.WebGLRenderer();
    //设置渲染器的高度和宽度,如果加上第三个值 false,则按场景大小显示,等比例缩放
    renderer.setSize( window.innerWidth, window.innerHeight,false);
    //将渲染器添加到html当中
    document.body.appendChild( renderer.domElement );
 
    //定义线的基本材料,我们可以使用LineBasicMaterial(实线材料)和LineDashedMaterial(虚线材料)
    var material = new THREE.LineBasicMaterial({color:0x0000ff});
    //设置具有几何顶点的几何(Geometry)或缓冲区几何(BufferGeometry)设置顶点位置,看名字就知道了,一个是直接将数据保存在js里面的,另一个是保存在WebGL缓冲区内的,而且肯定保存到WebGL缓冲区内的效率更高
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(-10,0,0));
    geometry.vertices.push(new THREE.Vector3(0,10,0));
    geometry.vertices.push(new THREE.Vector3(10,0,0));
    //使用Line方法将线初始化
    var line = new THREE.Line(geometry, material);
    //将线添加到场景
    scene.add(line);
 
    //使用渲染器渲染出场景和相机
    renderer.render(scene, camera);
</script>
</body>
</html>
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多