three.js绘制直线

汉武大帝·

已于 2024-02-04 17:03:22 修改

阅读量4.2k

点赞数 3

分类专栏： three.js 文章标签： javascript 开发语言 ecmascript

于 2022-02-17 15:39:58 首次发布

本文链接：https://blog.csdn.net/yinge0508/article/details/122984639

版权

three.js 专栏收录该内容

112 篇文章 11 订阅

订阅专栏

先看效果：

本文中创建直线的方式用了三种：

方式一：使用 Vector3创建点后，添加到geometry.vertices中（用的普通模型对象）

var p1 = new THREE.Vector3(50,10,20);
var p2 = new THREE.Vector3(10,40,30);
geometry.vertices.push(p1,p2);

方式二：使用 Vector3, LineCurve3

var p3 = new THREE.Vector3(100,10,10);
var p4 = new THREE.Vector3(10,10,100);
var line2 = new THREE.LineCurve3(p3,p4);
let points = line2.getPoints(100);
geometry.setFromPoints(points);

方式三：使用 Vector2, LineCurve

var p5 = new THREE.Vector2(80,10);
var p6 = new THREE.Vector2(20,80);
var line3 = new THREE.LineCurve(p5,p6);
let points = line3.getPoints(100);
geometry.setFromPoints(points);

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制二维三维直线</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>
<body>
  <script>
    // 1,创建场景对象
    var scene = new THREE.Scene();
    // 2,创建普通模型对象
    var geometry = new THREE.BufferGeometry();
    // getPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
    // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices

    //创建直线的方式有三种：
      // 方式一 start (创建三维直线，使用 Vector3)
      var p1 = new THREE.Vector3(50,10,20);
      var p2 = new THREE.Vector3(10,40,30);
      geometry.vertices.push(p1,p2);
      // 方式一 end (创建三维直线，使用 Vector3)

      // 方式二 start （创建三维直线，使用 Vector3, LineCurve3）
      // var p3 = new THREE.Vector3(100,10,10);
      // var p4 = new THREE.Vector3(10,10,100);
      // var line2 = new THREE.LineCurve3(p3,p4);
      // let points = line2.getPoints(100);
      // geometry.setFromPoints(points);
      // 方式二 end （创建三维直线，使用 Vector3, LineCurve3）
      
      // 方式三  start （创建二维直线，使用 Vector2, LineCurve）
      // var p5 = new THREE.Vector2(80,10);
      // var p6 = new THREE.Vector2(20,80);
      // var line3 = new THREE.LineCurve(p5,p6);
      // let points = line3.getPoints(100);
      // geometry.setFromPoints(points);
      // 方式三  end （创建二维直线，使用 Vector2, LineCurve）

    var material = new THREE.LineBasicMaterial({color:0xee00ff});
    var line = new THREE.Line(geometry,material);
    scene.add(line);
    // 3，创建环境光对象
    var ambient = new THREE.AmbientLight({color:0xffffff});
    scene.add(ambient);
    // 4，创建相机对象
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 200;
    var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,-2000,2000);
    camera.position.set(200,300,200);
    camera.lookAt(scene.position);
     // 创建轴辅助对象
     var axes_helper = new THREE.AxesHelper(500);
     scene.add(axes_helper);
    // 5，创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    document.body.appendChild(renderer.domElement);
    function render(){
      renderer.render(scene,camera);
    }
    render();
    // 创建鼠标控制对象
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    controls.addEventListener('change',render);
  </script>
</body>
</html>

汉武大帝·

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
three.js绘制直线

先看效果：本文中创建直线的方式用了三种：方式一：使用 Vector3创建点后，添加到geometry.vertices中（用的普通模型对象）var p1 = new THREE.Vector3(50,10,20);var p2 = new THREE.Vector3(10,40,30);geometry.vertices.push(p1,p2);方式二：使用 Vector3, LineCurve3var p3 = new THREE.Vector3(100,10,10..
复制链接

扫一扫