Three.js使用ExtrudeGeometry拉伸模型

已于 2022-08-30 19:42:59 修改
阅读量1.3k 收藏 4
点赞数 1
分类专栏： Three.js 文章标签： javascript 前端 开发语言 Three.js
于 2022-08-26 14:51:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz122330/article/details/125635501
版权

Three.js使用ExtrudeGeometry拉伸模型

Three.js坐标系

坐标系分为左手坐标系和右手坐标系，Three.js采用右手坐标系。
在这里插入图片描述

ExtrudeGeometry拉伸模型

Three.js新建Plane后，图形会生成在XY面，然后沿着Z轴拉伸。测试例子向-Z轴拉伸。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
      }
    </style>
    <script src="../three.js-master/build/three.js"></script>
    <script src="../three.js-master/examples/js/controls/OrbitControls.js"></script>
  </head>

  <body>
    <script>
      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();

      var shape = new THREE.Shape();
      /**四条直线绘制一个矩形轮廓*/
      shape.moveTo(0, 0); //起点
      shape.lineTo(0, 100); //第2点
      shape.lineTo(100, 100); //第3点
      shape.lineTo(100, 0); //第4点
      shape.lineTo(0, 0); //第5点
      var geometry = new THREE.ExtrudeGeometry( //拉伸造型
        shape, //二维轮廓
        //拉伸参数
        {
          depth: -20, //拉伸长度
          bevelEnabled: false, //无倒角
        }
      );
      var material = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
      });
      const plane = new THREE.Mesh(geometry, material);
      scene.add(plane);

      // 平行光
      directionalLight = new THREE.DirectionalLight(0xffffff);

      // 平行光配置
      directionalLight.position.set(-40, 60, -10);
      directionalLight.castShadow = true;
      directionalLight.shadow.camera.near = 20;
      directionalLight.shadow.camera.far = 200;
      directionalLight.shadow.camera.left = -50;
      directionalLight.shadow.camera.right = 50;
      directionalLight.shadow.camera.top = 50;
      directionalLight.shadow.camera.bottom = -50;

      // 距离和强度
      directionalLight.distance = 0;
      directionalLight.intensity = 0.5;

      // 设置阴影的分辨率
      directionalLight.shadow.mapSize.width = 1024;
      directionalLight.shadow.mapSize.height = 1024;

      scene.add(directionalLight);

      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
      var axisHelper = new THREE.AxesHelper(250);
      scene.add(axisHelper);
      const cameraHelper = new THREE.CameraHelper(
        directionalLight.shadow.camera
      );
      // scene.add(cameraHelper);

      /**
       * 相机设置
       */
      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, 1, 1000);
      camera.position.set(200, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      renderer.shadowMap.enabled = true;
      //执行渲染操作   指定场景、相机作为参数
      // renderer.render(scene, camera);
      function render() {
        renderer.render(scene, camera); //执行渲染操作
        // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render); //请求再次执行渲染函数render
      }
      render();
      var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
    </script>
  </body>
</html>

在这里插入图片描述

沿Y轴拉伸图形

如果需要沿着XZ平面，向Y轴拉伸。则使用plane.rotation.x = Math.PI / 2 旋转图形即可。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
      }
    </style>
    <script src="../three.js-master/build/three.js"></script>
    <script src="../three.js-master/examples/js/controls/OrbitControls.js"></script>
  </head>

  <body>
    <script>
      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();

      var shape = new THREE.Shape();
      /**四条直线绘制一个矩形轮廓*/
      shape.moveTo(0, 0); //起点
      shape.lineTo(0, 100); //第2点
      shape.lineTo(100, 100); //第3点
      shape.lineTo(100, 0); //第4点
      shape.lineTo(0, 0); //第5点
      var geometry = new THREE.ExtrudeGeometry( //拉伸造型
        shape, //二维轮廓
        //拉伸参数
        {
          depth: -20, //拉伸长度
          bevelEnabled: false, //无倒角
        }
      );
      var material = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
      });
      const plane = new THREE.Mesh(geometry, material);
      plane.rotation.x = Math.PI / 2;
      scene.add(plane);

      // 平行光
      directionalLight = new THREE.DirectionalLight(0xffffff);

      // 平行光配置
      directionalLight.position.set(-40, 60, -10);
      directionalLight.castShadow = true;
      directionalLight.shadow.camera.near = 20;
      directionalLight.shadow.camera.far = 200;
      directionalLight.shadow.camera.left = -50;
      directionalLight.shadow.camera.right = 50;
      directionalLight.shadow.camera.top = 50;
      directionalLight.shadow.camera.bottom = -50;

      // 距离和强度
      directionalLight.distance = 0;
      directionalLight.intensity = 0.5;

      // 设置阴影的分辨率
      directionalLight.shadow.mapSize.width = 1024;
      directionalLight.shadow.mapSize.height = 1024;

      scene.add(directionalLight);

      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
      var axisHelper = new THREE.AxesHelper(250);
      scene.add(axisHelper);
      const cameraHelper = new THREE.CameraHelper(
        directionalLight.shadow.camera
      );
      // scene.add(cameraHelper);

      /**
       * 相机设置
       */
      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, 1, 1000);
      camera.position.set(200, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      renderer.shadowMap.enabled = true;
      //执行渲染操作   指定场景、相机作为参数
      // renderer.render(scene, camera);
      function render() {
        renderer.render(scene, camera); //执行渲染操作
        // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render); //请求再次执行渲染函数render
      }
      render();
      var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
    </script>
  </body>
</html>

在这里插入图片描述

悠然~
关注
专栏目录
three.js从入门到精通系列教程023 - three.js利用ExtrudeGeometry创建多个拉伸缓冲几何体支持旋转缩放
深南大道
01-21 647
【代码】three.js从入门到精通系列教程023 - three.js利用ExtrudeGeometry创建多个拉伸缓冲几何体支持旋转缩放。
带你入门three.js——从0到1实现一个3d可视化地图
suandfei的博客
07-04 5029
前言 终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么 对于three.js 这个框架有一个简单的理解，可以入门下。学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。我用一个简单的实例 带大家用three实现简单的可视化地球案例 。 3d框架的选择——three.js 1.为什么选择thre
Three.js拉伸扫描成型ExtrudeGeometry
u014291990的博客
11-30 3004
拉伸扫描成型ExtrudeGeometry 本文是Three.js电子书的7.8节 构造函数ExtrudeGeometry()和ShapeGeometry一样是利用Shape对象生成几何体对象，区别在于ExtrudeGeometry()可以利用2D轮廓生成3D模型， 如果你使用任何三维软件都知道可以先绘制一个二维的轮廓图，然后拉伸成型得到三维模型。ExtrudeGeometry()第二个参数是拉...
ThreeJS入门（047）：THREE.ExtrudeGeometry 知识详解，示例代码
最新发布
大剑师兰特的GIS世界
09-29 1773
`THREE.ExtrudeGeometry` 是 Three.js 中用于创建挤出几何体的一个类。挤出几何体是从一个二维路径（轮廓）通过沿着某个方向（通常是 Z 轴）“挤出”一定的距离来生成三维几何体。这种方法非常适合创建各种三维模型，如字母、符号、标志等。
threejs 拉伸成型几何体`ExtrudeGeometry`
u014291990的博客
12-15 693
Shape。
44 Three.js拉伸几何体THREE.ExtrudeGeometry
热门推荐
现在学习也不晚
12-19 1万+
拉伸几何体是什么 拉伸是指我们有一个二维图形，通过针对这个二维图形进行z轴拉伸，将它转换成三维图形。例如，如果我们拉伸THREE.CircleGeometry，就会得到一个类似圆柱体的图形；如果我们拉伸THREE.PlaneGeometry，就会得到一个立方体。下面我们介绍一下常用的THREE.ExtrudeGeometry THREE.ExtrudeGeometry简介 THREE.E...
Three.js ExtrudeGeometry.js 源码研究
mu399的专栏
01-22 781
ExtrudeGeometry.js 是Three.js 一个几何体类，可以把自己创建的或者从svg导入的平面2D图形拉伸为几何体。最能体现这个几何体类强大的例子是 http://www.wjceo.com/blog/threejs/2018-02-12/46.html 把其中的 斜角厚度bevelThickness = 3, 斜角尺寸bevelSize = 1.4, 斜角分段数bevelSegm...
使用three.js + geojson 完成广西地图的绘制（上篇）
w__qwwq的博客
09-06 3180
three.js+geojson 绘制广西地图
《Three.js 开发指南》源码示例说明以及在线demo（原书第二版）附第三版的代码下载
jdk137的专栏
12-10 4168
1. 用Three.js创建你的第一个三维场景 1.1 具有所有基本元素的hello world示例 src/chapter-01/06-screen-size-change.html 2. 使用构建Three.js场景的基本组件 2.1 添加、删除、枚举、通过名字获取场景中的对象 src/chapter-02/01-basic-scene.html 2.2 雾化效果 src/chapter-02...
threejs利用svg拉伸形成立体图
weixin_43977647的博客
03-02 2594
1.svg图片转化成threejs对象 这里我们用到了别人写好的函数transformSVGPathExposed()，这个函数传入的变量是svg图片的路径字符串，输出的是threejs中shape对象。 https://johnson2heng.github.io/three.js-demo/lib/js/libs/d3-threeD.js 我们在vue中引入上述js文件需要做一点小小修改。 原...
three.js中svg拉伸体的转换函数transformSVGPathExposed
11-28
在vue中使用three.js的svg拉伸体的转换函数transformSVGPathExposed
Threejs进阶之十八:使用ExtrudeGeometry从二维图形创建三维几何体
九仞山的专栏
06-08 2319
详细介绍了使用ExtrudeGeometry从二维图形创建三维几何体的方法和步骤
three.js之高级几何体-拉伸体ExtrudeGeometry(vue中使用three.js32)
点燃火柴的博客
11-25 1984
ExtrudeGeometry几何体介绍和使用1.ExtrudeGeometry几何体介绍2.demo说明3.demo代码 1.ExtrudeGeometry几何体介绍 ExtrudeGeometry可以使用一个二维图形创建出一个三维图形。创建ExtrudeGeometry几何体时可输入以下参数： 属性 必须 描述 depth 否 该属性指定图形可以拉伸多高，默认值是100 bevelThickness 否 该属性指定斜角的厚度，默认值是6 bevelSize 否 该属性指定斜角的高
three.js 06-03 之 ExtrudeGeometry 高级几何体
zhulx_sz 的博客
12-27 6099
本篇介绍 three.js 中的 ExtrudeGeometry 拉伸几何体。它是从一个二维图形创建出一个三维图形。譬如，我们可以先通过 THREE.Shap 对象，先创建一个二维的图形，然后通过 ExtrudeGeometry 将它拉伸为一个三维图形。也可以先通过 THREE.PlaneGeometry 对象创建一个二维平面，然后再利用 ExtrudeGeometry 进行拉伸。关于 Extru
threejs 用 ExtrudeGeometry 画管线
出埃及记
04-26 5894
首先说一下ExtrudeGeometry ,可以先看官网,这个方法的意思是沿着给定的路径拉伸一个平面图形，然后就成为3D图形了。 所以很明显这个方法要两个参数，路径和图形。 然后接下来说管线的问题。 var radius = data[i]['Diameter'] - 0; // 管子的半径 var shape = new THREE.Shape(); shape.absarc( 0, 0...
threejs 扫描ExtrudeGeometry
u014291990的博客
12-15 451
除了可以实现拉伸成型，也可以让一个平面轮廓。查看案例源码，你可以看到。的一个扫描变换案例。
threejs：三维绘图（拉伸,旋转拉伸,等）
weixin_42755384的博客
04-10 4142
占坑
Vue与Three.js结合加载glTF模型实战指南
"Vue使用Three.js加载glTF模型的方法详解" 在现代前端开发中，Vue.js是一个流行的JavaScript框架，用于构建用户界面。同时，Three.js是一个强大的库，它允许开发者在浏览器中创建3D图形，利用WebGL技术。本文将详细...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值