学习threejs，绘制二维线

news2024/11/25 11:03:34

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
二、🍀绘制二维线
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍基于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. ☘️代码样例

<!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>