做游戏网站,eclipse 网站开发,企业网站 免费 php,免费个人网站建设报价#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言二、#x1f340;绘制二维线1. ☘️…⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言二、绘制二维线1. ☘️实现思路2. ☘️代码样例 一、前言
本文详细介绍基于threejs如何绘制二维线亲测可用。希望能帮助到您。一起学习加油加油
二、绘制二维线
1. ☘️实现思路
1、创建Scene三维场景2、初始化camera相机定义相机位置 camera.position.set设置相机朝向lookAt3、创建渲染器document加入渲染器4、创建THREE.LineBasicMaterial线材质创建THREE.Geometry线几何线几何计入THREE.Vector3顶点创建THREE.Line线类型场景scene加入THREE.Line线。5、渲染器renderer渲染场景scene和相机camera
2. ☘️代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelearn2/titlescript srclib/threejs/91/three.js/scriptstylebody{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(-50,0,0))geometry.vertices.push(new THREE.Vector3(0,50,0))geometry.vertices.push(new THREE.Vector3(50,0,0))//使用Line方法将线初始化var line new THREE.Line(geometry, material)//将线添加到场景scene.add(line)line.rotation.x 1//使用渲染器渲染出场景和相机renderer.render(scene, camera);
/script
/body
/html效果如下
