three.js基础几何体:立方体,球,圆柱的绘制

这篇博客介绍了three.js入门,重点讲解如何使用three.js绘制基础几何体,包括立方体、球体和圆柱体,并提供了具体的代码实例和参数解释。博主分享了创建几何体的代码,以及设置材料属性和开启网格模式的方法,旨在帮助初学者理解three.js的基本用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学习交流欢迎加群:789723098,博主会将一些demo整理共享       

作为three.js的学习入门,一直在思考要怎样写才可以更符合初学者,对于我自己来说,本身也不是资深的玩家,也是入门不久的菜鸟,但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性的东西介绍太多,因为其是基于WenGL开发的第三方库,如果延伸下去那就会没完没了,这也违背了three.js开发的初衷(为喜欢前端图形学开发,却没有良好的webgl和js基础的人群准备,使三维图形的开发变得更加容易),所以接下来就从绘制基础的几何体开始吧,结合实际例子,这样更加简单粗暴。如果大家喜欢原生WebGL开发可以关注我另外的博客分栏:点击打开链接

在开始代码实例以前,先讲讲几种几何体的代码实现方式:

(1) 平面

 

new THREE.PlaneGeometry(100,100,10,10)

括号里的内容分别对应平面的长,宽,长方向等分量,宽方向等分量,第三第四个参数这么形容可能不太恰当,但实在找不出更恰当的形容,这里的意思是这样的,沿着长的方向将其分为10等分,沿着宽的方向将其分为10等分,参数可以根据大家的需要自己设置哈。

(2) 立方体

创建立方体的代码为:

 

new THREE.CubeGeometry(20, 20, 20, 10, 10, 10);

这里括号里的参数分别对应:长、宽、高、长方向等分量、宽方向等分量、高方向等分量;参数可以根据自己

### Three.js 内置几何体的使用方法与示例 #### 什么是内置几何体Three.js 提供了一组预定义的几何体类,可以直接用来创建常见的三维形状。这些几何体包括但不限于 `BoxGeometry`(立方体)、`SphereGeometry`(球体)、`PlaneGeometry`(平面)、`CircleGeometry`(圆盘)、`CylinderGeometry`(圆柱)等[^1]。 #### 常见几何体及其参数说明 以下是几种常用的内置几何体及其初始化时所需的典型参数: - **BoxGeometry (立方体)**: - 参数:宽度 (`width`)、高度 (`height`) 和深度 (`depth`)。 - 示例代码: ```javascript const boxGeometry = new THREE.BoxGeometry(2, 2, 2); // 创建边长为2的立方体 ``` - **SphereGeometry (球体)**: - 参数:半径 (`radius`)、经向分段数 (`widthSegments`) 和纬向分段数 (`heightSegments`)。 - 示例代码: ```javascript const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); // 半径为1,细分度较高 ``` - **PlaneGeometry (平面)**: - 参数:宽 (`width`) 和高 (`height`)。 - 示例代码: ```javascript const planeGeometry = new THREE.PlaneGeometry(5, 5); // 宽和高均为5的矩形平面 ``` - **CircleGeometry (圆形/圆盘)**: - 参数:半径 (`radius`)、分割段数 (`segments`)。 - 示例代码: ```javascript const circleGeometry = new THREE.CircleGeometry(1, 32); // 半径为1,分为32段 ``` - **CylinderGeometry (圆柱)**: - 参数:顶部半径 (`topRadius`)、底部半径 (`bottomRadius`)、高度 (`height`)、径向分段数 (`radialSegments`)。 - 示例代码: ```javascript const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32); // 上下底面半径相同,高度为2 ``` #### 绘制几何体的完整流程 要将几何体显示出来,通常需要完成以下几个步骤: 1. **创建几何体**:选择合适的几何体类并传入必要的参数。 2. **设置材质**:指定几何体表面的颜色或其他属性。 3. **合成网格**:将几何体与材质组合成一个可渲染的对象。 4. **添加到场景**:把生成的网格对象放入场景中以便渲染。 以下是一个完整的例子,展示如何在一个简单场景中绘制多个不同类型的几何体[^2]: ```javascript // 初始化场景 const scene = new THREE.Scene(); // 设置透视摄像机 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(5, 5, 5); // 添加 WebGL 渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建多种几何体 const geometries = [ new THREE.BoxGeometry(2, 2, 2), // 立方体 new THREE.SphereGeometry(1, 32, 32), // 球体 new THREE.PlaneGeometry(4, 4), // 平面 new THREE.CircleGeometry(1, 32), // 圆盘 new THREE.CylinderGeometry(1, 1, 2, 32)// 圆柱 ]; geometries.forEach((geometry, index) => { const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff }); const mesh = new THREE.Mesh(geometry, material); // 调整位置以区分各个几何体 mesh.position.x = (index % 3) * 4 - 4; // X轴偏移 mesh.position.y = Math.floor(index / 3) * 4 - 2;// Y轴偏移 scene.add(mesh); }); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 此代码片段会依次生成五个不同的几何体,并将其放置在适当的位置上形成一组排列整齐的图形集合。 --- ####
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值