几何体构造函数类型介绍

在场景中,我们可以通过创建几何体的构造函数,传入参数在0,0位置添加几何体.目前api中为我们提供了简单的创建几何体的构造函数:
BoxGeometry - 方形 (参数：长，宽，高)

  1. var geometry = new THREE.BoxGeometry(100, 100, 100);

SphereGeometry - 球体 (参数：半径60 经纬度细分数40,40)

  1. var geometry = new THREE.SphereGeometry(60, 40, 40);

CylinderGeometry - 圆柱体(参数：圆柱面顶部、底部直径50,50 高度100 圆周分段数)

  1. var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );

OctahedronGeometry - 正八面体

  1. var geometry = new THREE.OctahedronGeometry(50);

DodecahedronGeometry - 正十二面体

  1. var geometry = new THREE.DodecahedronGeometry(50);

IcosahedronGeometry - 正二十面体

  1. var geometry = new THREE.IcosahedronGeometry(50);

创建几何体添加到场景中的步骤

这里可以通过以下三个步骤像一个场景中添加几何体
1.通过构造函数创建几何体实例

  1. var geometry1 = new THREE.BoxGeometry(100, 100, 100);

2.设置几何体的材质

  1. var material1 = new THREE.MeshLambertMaterial({
  2.   color: 0x0000ff
  3. }); //材质对象Material

这里简单介绍一下MeshLambertMaterial,用于设置几何体的材质或者颜色
3.创建网格模型对象Mesh,传入几何体实例以及几何体材质

  1. var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh

4.把网格对象Mesh添加到场景中

  1. scene.add(mesh1); //网格模型添加到场景中

添加多个几何体

添加多个几何体时会发现,实例化添加的几何体都会出现在空间中间位置.那么如果我们需要合理摆放这些几何体,这个时候我们需要对网格对象(Mesh)进行坐标设置

定位方法进行设置位置

  1. mesh3.position.set(120, 0, 0);//设置mesh3模型对象的xyz坐标为120,0,0

单一轴进行设置位置

  1. mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120

网格辅助线:

我们发现把多个多边形加入到场景之后,很难对每个位置进行把控,这里three.js为我们提供了网格辅助线,可以作为位移的参考:

  1.  // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
  2. var axisHelper = new THREE.AxisHelper(250);
  3. scene.add(axisHelper);

完整代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>OrbitControls 鼠标控制交互</title>
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             overflow: hidden;
  11.             /* 隐藏body窗口区域滚动条 */
  12.         }
  13.     </style>
  14.     <!--引入three.js三维引擎-->
  15.     <script src="./js-r100/three.js"></script>
  16.     <script src="./js-r100/controls/OrbitControls.js"></script>
  17.     <script type = "moduls" src="./js-r100/src/loaders/CubeTextureLoader.js"></script>
  18. </head>
  20. <body>
  21.     <script>
  22.         /**
  23.          * 创建场景对象Scene
  24.          */
  25.         var scene = new THREE.Scene();
  26.         /**
  27.          * 创建网格模型
  28.          */
  29.         // 立方体网格模型
  30.         var geometry1 = new THREE.BoxGeometry(100, 100, 100);
  31.         var texture = new THREE.TextureLoader().load("./images/skybox/远山_BK.jpg");
  32.         texture.wrapS = THREE.RepeatWrapping;
  33.         texture.wrapT = THREE.RepeatWrapping;
  34.         texture.repeat.set(4, 4);
  35.         var material1 = new THREE.MeshLambertMaterial({
  36.             color: 0x0000ff
  37.         }); //材质对象Material
  38.         var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
  39.         scene.add(mesh1); //网格模型添加到场景中
  41.         // 球体网格模型
  42.         var geometry2 = new THREE.SphereGeometry(60, 40, 40);
  43.         var material2 = new THREE.MeshLambertMaterial({
  44.             color: 0xff00ff
  45.         });
  46.         var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
  47.         mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120
  48.         scene.add(mesh2);
  50.         // 圆柱网格模型
  51.         var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
  52.         var material3 = new THREE.MeshLambertMaterial({
  53.             color: 0xffff00
  54.         });
  55.         var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
  56.         // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120
  57.         mesh3.position.set(120, 0, 0);//设置mesh3模型对象的xyz坐标为120,0,0
  58.         scene.add(mesh3);
  59.         // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
  60.         var axisHelper = new THREE.AxisHelper(250);
  61.         scene.add(axisHelper);
  62.         /**
  63.          * 光源设置
  64.          */
  65.         //点光源
  66.         var point = new THREE.PointLight(0xffffff);
  67.         point.position.set(400, 200, 300); //点光源位置
  68.         scene.add(point); //点光源添加到场景中
  69.         //环境光
  70.         var ambient = new THREE.AmbientLight(0x444444);
  71.         scene.add(ambient);
  72.         /**
  73.          * 相机设置
  74.          */
  75.         var width = window.innerWidth; //窗口宽度
  76.         var height = window.innerHeight; //窗口高度
  77.         var k = width / height; //窗口宽高比
  78.         var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
  79.         //创建相机对象
  80.         var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
  81.         camera.position.set(200, 100, -90); //设置相机位置
  82.         camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  83.         /**
  84.          * 创建渲染器对象
  85.          */
  86.         var renderer = new THREE.WebGLRenderer();
  87.         renderer.setSize(width, height);//设置渲染区域尺寸
  88.         renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  89.         document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  90.         //- 渲染函数
  91.         function render() {
  92.             //执行渲染操作   指定场景、相机作为参数
  93.             renderer.render(scene, camera);
  94.             console.log(camera);
  95.         }
  96.         render();
  97.         //- 添加鼠标对视觉相机的操作
  98.         let controls = new THREE.OrbitControls(camera);
  99.         //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
  100.         controls.addEventListener('change', render, { passive: true });
  101.     </script>
  102. </body>
  104. </html>

Texture(纹理):

创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。

构造函数:

Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )

  1. var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
  2. texture.wrapS = THREE.RepeatWrapping;
  3. texture.wrapT = THREE.RepeatWrapping;
  4. texture.repeat.set( 4, 4 );

使用属性/方法:

参考http://www.webgl3d.cn/threejs/docs/#api/zh/textures/Texture