devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

three.js绘制直线_three.js连接两个对象画线

作者：AllinToyou | 2024-02-16 06:28:31

赞

踩

three.js连接两个对象画线

先看效果：

 

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

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

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

方式二：使用 Vector3, LineCurve3 

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

方式三：使用 Vector2, LineCurve

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

 全部代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>绘制二维三维直线</title>
  8.   <script src="../three.js"></script>
  9.   <script src="../OrbitControls.js"></script>
  10. </head>
  11. <body>
  12.   <script>
  13.     // 1,创建场景对象
  14.     var scene = new THREE.Scene();
  15.     // 2,创建普通模型对象
  16.     var geometry = new THREE.BufferGeometry();
  17.     // getPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
  18.     // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
  19.  
  20.     //创建直线的方式有三种：
  21.       // 方式一 start (创建三维直线，使用 Vector3)
  22.       var p1 = new THREE.Vector3(50,10,20);
  23.       var p2 = new THREE.Vector3(10,40,30);
  24.       geometry.vertices.push(p1,p2);
  25.       // 方式一 end (创建三维直线，使用 Vector3)
  26.  
  27.       // 方式二 start （创建三维直线，使用 Vector3, LineCurve3）
  28.       // var p3 = new THREE.Vector3(100,10,10);
  29.       // var p4 = new THREE.Vector3(10,10,100);
  30.       // var line2 = new THREE.LineCurve3(p3,p4);
  31.       // let points = line2.getPoints(100);
  32.       // geometry.setFromPoints(points);
  33.       // 方式二 end （创建三维直线，使用 Vector3, LineCurve3）
  34.       
  35.       // 方式三  start （创建二维直线，使用 Vector2, LineCurve）
  36.       // var p5 = new THREE.Vector2(80,10);
  37.       // var p6 = new THREE.Vector2(20,80);
  38.       // var line3 = new THREE.LineCurve(p5,p6);
  39.       // let points = line3.getPoints(100);
  40.       // geometry.setFromPoints(points);
  41.       // 方式三  end （创建二维直线，使用 Vector2, LineCurve）
  42.  
  43.     var material = new THREE.LineBasicMaterial({color:0xee00ff});
  44.     var line = new THREE.Line(geometry,material);
  45.     scene.add(line);
  46.     // 3，创建环境光对象
  47.     var ambient = new THREE.AmbientLight({color:0xffffff});
  48.     scene.add(ambient);
  49.     // 4，创建相机对象
  50.     var width = window.innerWidth;
  51.     var height = window.innerHeight;
  52.     var k = width / height;
  53.     var s = 200;
  54.     var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,-2000,2000);
  55.     camera.position.set(200,300,200);
  56.     camera.lookAt(scene.position);
  57.      // 创建轴辅助对象
  58.      var axes_helper = new THREE.AxesHelper(500);
  59.      scene.add(axes_helper);
  60.     // 5，创建渲染器对象
  61.     var renderer = new THREE.WebGLRenderer();
  62.     renderer.setSize(width,height);
  63.     document.body.appendChild(renderer.domElement);
  64.     function render(){
  65.       renderer.render(scene,camera);
  66.     }
  67.     render();
  68.     // 创建鼠标控制对象
  69.     var controls = new THREE.OrbitControls(camera,renderer.domElement);
  70.     controls.addEventListener('change',render);
  71.   </script>
  72. </body>
  73. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/91487
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号