学习threejs,绘制二维线

👨‍⚕️ 主页: gis分享者

👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍⚕️ 收录于专栏:threejs gis工程师


文章目录


一、🍀前言

本文详细介绍基于threejs如何绘制二维线,亲测可用。希望能帮助到您。一起学习,加油!加油!

二、🍀绘制二维线

1. ☘️实现思路

  • 1、创建Scene三维场景
  • 2、初始化camera相机,定义相机位置 camera.position.set,设置相机朝向lookAt
  • 3、创建渲染器,document加入渲染器
  • 4、创建THREE.LineBasicMaterial线材质,创建THREE.Geometry线几何,线几何计入THREE.Vector3顶点,创建THREE.Line线类型,场景scene加入THREE.Line线。
  • 5、渲染器renderer渲染场景scene和相机camera

2. ☘️代码样例

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn2</title>
    <script src="lib/threejs/91/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(-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>

效果如下:

相关推荐
魂断蓝桥6663 天前
如何基于three.js(webgl)引擎架构,实现3D密集架库房,3D档案室智能巡检
webgl·threejs·3d建筑·3d档案室·3d定位、三维室内定位、3d建筑·3d库房·3d密集架
gis分享者7 天前
学习threejs,交互式神经网络可视化
神经网络·可视化·threejs·filmpass·effectcomposer·unrealbloompass·outputpass
qq_5895681013 天前
threejs顶点UV坐标、纹理贴图
threejs·uv
WebGIS开发15 天前
Three.js搭建小米SU7三维汽车实战(2)场景搭建
开发语言·javascript·汽车·threejs
qq_5895681015 天前
threejs模型对象、材质
threejs
gis分享者21 天前
学习threejs,使用Physijs物理引擎,使用DOFConstraint自由度约束,模拟小车移动
汽车·threejs·物理·physijs·physi·dofconstraint
gis分享者1 个月前
学习threejs,使用Physijs物理引擎,通过控制重力,实现多米诺骨牌效果
threejs·碰撞·物理·physijs·physi·多米诺
gis分享者1 个月前
学习threejs,使用Physijs物理引擎,加载各种几何体网格对象
threejs·shape·物理·physijs·physi·几何体
MossGrower1 个月前
65.Three.js案例-使用 MeshNormalMaterial 和 MeshDepthMaterial 创建 3D 图形
javascript·threejs·spheregeometry·torusknotgeome
醉书生ꦿ℘゜এ1 个月前
threejs学习002-场景中添加几何体
javascript·vue.js·学习·threejs