Three.js学习之几何形状

 更新时间:2016年08月01日 11:08:12   投稿:daisy  
本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程,包括立方体、平面与球体,有需要的朋友们可以学习下。

1.立方体

  虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值。其构造函数是:

THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)

  width:x方向上的长度

  height:y方向上的长度

  depth:z方向上的长度

  widthSegments:x方向上的分段数(可选,缺省值1)

  heightSegments:y方向上的分段数(同上)

  depthSegments:z方向上的分段数(同上) 

  未分段:

var material = new THREE.MeshBasicMaterial({

  color: 0xffff00,

  wireframe: true

});

drawCube(scene, material);

function drawCube(scene, material) {

  var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), material);

  scene.add(cube);

}


  物体的默认位置是原点,对于立方体而言,是其几何中心在原点的位置。

  分段:

var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);

  为什么会有这么多邪线呢?版本问题。R73版本:

 

  注意这个分段是对六个面进行分段,而不是对立方体的体素分段,因此在立方体的中间是不分段的,只有六个侧面被分段。

2.平面

  这里的平面(PlaneGeometry)其实是一个长方形,而不是数学意义上无限大小的平面。其构造函数为:

THREE.PlaneGeometry(width, height, widthSegments, heightSegments) 

  width:x方向上的长度

  height:y方向上的长度

  widthSegments:x方向上的分段数(可选,缺省值1)

  heightSegments:y方向上的分段数(同上)

  new THREE.PlaneGeometry(2, 4);创建的平面在x轴和y轴所在平面内,效果如下:

 

3.球体

  球体(SphereGeometry)的构造函数是:

THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart, phiLength, thetaStart, thetaLength)

// radius:半径

// segmentsWidth:经度上的分段数

// segmentsHeight:纬度上的分段数

// phiStart:经度开始的弧度

// phiLength:经度跨过的弧度

// thetaStart:纬度开始的弧度

// thetaLength:纬度跨过的弧度

  3.1 经纬度分段数

  首先,我们来理解下segmentsWidth和segmentsHeight。使用var sphere = new THREE.SphereGeometry(3, 8, 6)可以创建一个半径为3,经度划分成8份,纬度划分成6份的球体,如下图所示。

 

  segmentsWidth相当于经度被切成了几瓣,而segmentsHeight相当于纬度被切成了几层。

  new THREE.SphereGeometry(3, 5, 4)的效果:

 

  new THREE.SphereGeometry(3, 8, 6)的效果:

 

  new THREE.SphereGeometry(3, 18, 12)的效果:

 

  在图形底层的实现中,并没有曲线的概念,曲线都是由多个折线近似构成的。对于球体而言,当这两个值较大的时候,形成的多面体就可以近似看做是球体了。 

  3.2 经度弧度

  new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3)表示起始经度为Math.PI / 6,经度跨度为Math.PI / 3。

效果如下:

 

  注意,这里segmentsWidth为8意味着对于经度从Math.PI / 6跨过Math.PI / 3的区域内划分为8块,而不是整个球体的经度划分成8块后再判断在此经度范围内的部分。 

  3.3 纬度弧度

  纬度弧度同理。new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3)表示纬度从Math.PI / 6跨过Math.PI / 3。

效果如下:

 

  new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)的效果:

 

4.源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3.js测试四</title>
  </head>
  <body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  </body>
  <script type="text/javascript" src="js/three.min.js"></script>
  <script type="text/javascript">
    function init() {
      var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('mainCanvas')
      });
      renderer.setClearColor(0x000000);
      var scene = new THREE.Scene();
      
      // camera
      var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
      camera.position.set(25, 25, 25);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      scene.add(camera);
      
      // 材质
      var material = new THREE.MeshBasicMaterial({
        color: 0xffff00,
        wireframe: true
      });
      
      drawCube(scene, material);    //立方体
//     drawPlane(scene, material);    //平面
//     drawSphere(scene, material);  //球体
      
      // render
      renderer.render(scene, camera);
    }
    
    function drawCube(scene, material) {
      var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
      scene.add(cube);
    }
    
    function drawPlane(scene, material) {
      var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 4), material);
      scene.add(plane);
    }
    
    function drawSphere(scene, material) {
      var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 18, 12), material);
//     var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3), material);
//     var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material);
//      var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
      scene.add(sphere);
    }
  </script>
</html>

以上就是Three.js学习之几何形状的全部内容,小编陆续还会更新关于Three.js的文章,请大家继续关注脚本之家。

相关文章

  • js类库styled-components快速入门教程

    js类库styled-components快速入门教程

    这篇文章主要为大家介绍了js类库styled-components快速入门的教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • JS日程管理插件FullCalendar简单实例

    JS日程管理插件FullCalendar简单实例

    JS日程管理插件FullCalendar是一款基于jQuery的日历日程插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用
    2017-02-02
  • 精通JavaScript 纠正 cleanWhitespace函数

    精通JavaScript 纠正 cleanWhitespace函数

    这个函数用在火狐(firefox)上面老是出错,今天仔细研究了下,改正了,希望别人不要遇到我这样的问题
    2010-03-03
  • 浅谈轻量级js模板引擎simplite

    浅谈轻量级js模板引擎simplite

    这篇文章主要介绍了浅谈轻量级js模板引擎simplite的简介和用法的相关资料,需要的朋友可以参考下
    2015-02-02
  • 组件库Monmrepo架构与开发调试环境构建详解

    组件库Monmrepo架构与开发调试环境构建详解

    这篇文章主要为大家介绍了组件库Monmrepo架构与开发调试环境构建详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 分享5个好用的javascript文件上传插件

    分享5个好用的javascript文件上传插件

    本文为大家分享了5个不错的javascript文件上传插件,选择一款功能强大使用简单的上传插件将为我们节省很多开发时间
    2018-09-09
  • Highcharts入门之简介

    Highcharts入门之简介

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。下面通过本文的介绍及实例一起来学习学习吧。
    2016-08-08
  • Three.js学习之几何形状

    Three.js学习之几何形状

    本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程,包括立方体、平面与球体,有需要的朋友们可以学习下。
    2016-08-08
  • Three.js学习之文字形状及自定义形状

    Three.js学习之文字形状及自定义形状

    今天小编带大家学习的是Three.js的文字形状与自定义形状,文章内容很详细,对大家学习Three.js或许有帮助,下面一起来看看吧。
    2016-08-08
  • require.js深入了解 require.js特性介绍

    require.js深入了解 require.js特性介绍

    这篇文章主要介绍了require.js深入了解,require.js特性介绍,本文讲解了require.js和CommonJS的兼容、CDN回退、循环依赖、BaseUrl、JSONP等内容,需要的朋友可以参考下
    2014-09-09

最新评论