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库创建一个3维坐标系，并在该系统中绘制带有边框的立方体，以及在立方体表面绘制线条。three.js是JavaScript的一个强大库，专门用于在Web浏览器中进行3D图形编程。让我们一...
Three.js 提供了多种预定义的几何体，如BoxGeometry（立方体）、SphereGeometry（球体）和CylinderGeometry（圆柱体）等。对于人体解剖图，可能需要自定义几何体来精确匹配人体各个部位的形状。 2. 材质（Material）...
在"three.min.js"中，包含了各种几何形状的构造函数，如`THREE.BoxGeometry`（立方体）、`THREE.SphereGeometry`（球体）和`THREE.PlaneGeometry`（平面）。这些几何形状可以配合不同的材质（如`THREE....
three.js提供了多种内置几何体，如球体、立方体等，但心脏的形状更为复杂，可能需要导入外部3D模型文件（如.obj或.gltf格式）。在本项目中，可能使用了`THREE.GLTFLoader`加载外部3D模型，或者使用`THREE.Shape`和`...
四、Three.js材质与纹理 1. MeshBasicMaterial、MeshLambertMaterial等：定义物体表面的外观，如颜色、透明度等。 2. Texture：用于加载和应用图像、视频等作为材质的纹理。 五、加载外部3D模型（obj、fbx） 1. ...
Three.js支持多种类型的物体创建，包括基本几何体（如立方体、球体和圆锥体等）、自定义形状、网格等。它同样提供了材质来定义物体的外观，如标准材质、Phong材质、PBR（物理基础渲染）材质等。此外，Three.js还允许...
Three.js内置了多种几何体，如BoxGeometry（立方体）、SphereGeometry（球体）、CylinderGeometry（圆柱体）等。开发者也可以自定义几何体。 4. **材质（Material）**：材质定义了物体表面的外观，包括颜色、反射、...
在这个“WebGL/ThreeJS EdgesGeometry边缘几何体画一个立方体的边框demo”中，可能还包括了旋转、平移和缩放立方体，以及调整相机位置以查看边框效果的代码。开发者可能会使用`THREE.OrbitControls`来实现交互式的...
在IT行业中，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。而ArcGIS则是Esri公司的一款强大的地理信息系统（GIS），用于处理、分析和展示地理数据。当我们谈论“Three.js与ArcGIS的交互与...
这是一个基于JavaScript技术栈，结合了Express后端框架和Three.js前端库来实现的3D球体抽奖程序。这个程序能够创建一个动态、交互式的3D抽奖界面，为用户提供一种新颖的抽奖体验。以下是对该程序相关知识点的详细...
在本项目中，"Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_" 提供了一个关于使用Three.js库创建海洋温度颜色体绘制的实例。Three.js是一款强大的JavaScript库，专用于在Web浏览器中进行3D图形...
1. 几何体（Geometries）：如立方体、球体、平面等基本形状，是构成模型的基础。例如，`THREE.BoxGeometry()` 用于创建立方体，`THREE.SphereGeometry()` 创建球体。 2. 材质（Materials）：定义物体的外观，如颜色...
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js...
在立方体矩阵起伏动画特效中，Three.js首先会创建一个3D场景（Scene），然后在其中添加几何物体——立方体（Cube）。每个立方体都有自己的位置、大小和旋转属性，可以独立运动。通过改变这些属性，可以实现立方体...
2. **几何体（Geometries）**：学习创建和修改不同类型的3D几何体，如立方体、球体、圆柱体等。 3. **材质（Materials）**：掌握各种材质类型，如基础材质、金属材质、镜面材质等，以及如何应用纹理。 4. **光源...
3. **几何体(Geometry)**：表示3D形状，如立方体、球体、圆柱等，由`THREE.Geometry`及其子类定义。 4. **材质(Material)**：决定物体表面的外观，如颜色、纹理和反射，`THREE.MeshBasicMaterial`、`THREE....
在三维可视化领域，Three.js是一个非常流行的JavaScript库，它允许开发者在Web浏览器中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD（Point Cloud Data）模型文件的，这是一种常见的3D点云数据格式。在...
3. **几何体**（Geometry）: 这些是3D形状的基础，例如立方体、球体或平面。开发者可以使用预定义的几何体或创建自定义几何体。 4. **材质**（Material）: 材质决定了物体表面的外观，包括颜色、纹理和反射等特性。...
四、BIM与Three.js BIM是一种建筑行业的创新方法，它涵盖了建筑物的整个生命周期，从设计、施工到运维。BIM模型通常包含丰富的几何信息、属性数据和时间序列数据。Three.js可以作为展示BIM模型的前端工具，将复杂的...
3. **几何体（Geometry）**: Three.js提供了多种预定义的几何体，如立方体、球体、圆柱体等，开发者也可以自定义几何体。几何体是3D形状的基础，它们可以被赋予材质和位置。 4. **材质（Material）**: 材质决定了...