当前位置:   article > 正文

three.js 绘制管道_threejs管道 直角

threejs管道 直角

效果:

注意:绘制管道时,直线或者曲线都要用三维的,否则有问题。本文中用了 三位线条曲线LineCurve3,三位样条曲线 CatmullRomCurve3

代码如下:

  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 p1 = new THREE.Vector3(100,0,0);
  17. var p2 = new THREE.Vector3(0,0,0);
  18. // 创建三维直线
  19. var line1 = new THREE.LineCurve3(p2,p1);
  20. var points = [];
  21. for(var i=0;i<100;i+=5){
  22. points.push(new THREE.Vector3(i,i*1.5,i*1.5))
  23. }
  24. // 创建三维样条曲线
  25. var line = new THREE.CatmullRomCurve3(points);
  26. // 创建曲线路径以便于将 三维直线和三维样条曲线合并成一条曲线
  27. var curvePath = new THREE.CurvePath();
  28. curvePath.curves.push(line,line1);
  29. // 创建管道模型,扫描路径后渲染成管道
  30. var geometry = new THREE.TubeGeometry(curvePath,10,5,10,true);
  31. // 创建材质对象
  32. var material = new THREE.MeshBasicMaterial({color:0xff11aa});
  33. // 创建网格模型
  34. var mesh = new THREE.Mesh(geometry,material);
  35. scene.add(mesh);
  36. //3,创建环境光对象
  37. var ambient = new THREE.AmbientLight({color:0xffffff});
  38. scene.add(ambient);
  39. // 4,创建相机
  40. var width = window.innerWidth;
  41. var height = window.innerHeight;
  42. var k = width / height;
  43. var s = 150;
  44. // 创建正交相机
  45. var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,-1000,1000);
  46. camera.position.set(200,300,200);
  47. camera.lookAt(scene.position);
  48. // 5,创建渲染器
  49. var renderer = new THREE.WebGLRenderer();
  50. renderer.setSize(width,height);
  51. document.body.appendChild(renderer.domElement);
  52. function render(){
  53. renderer.render(scene,camera);
  54. }
  55. // 创建坐标轴辅助对象
  56. var axes = new THREE.AxesHelper(500);
  57. scene.add(axes);
  58. // 创建鼠标辅助对象
  59. var controls = new THREE.OrbitControls(camera,renderer.domElement);
  60. controls.addEventListener('change',render)
  61. render();
  62. </script>
  63. </body>
  64. </html>

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

闽ICP备14008679号