Three.js教程：Threejs常见几何体简介

推荐：将 NSDT场景编辑器加入你的3D工具链

其他系列工具： NSDT简石数字孪生

Threejs常见几何体简介

Three.js提供的几何体API很多，本节课先给大家介绍几个比较简单的案例，为后面的学习打下基础。

你可以结合threejs文档，把下面动手把下面几何体相关代码全部测试一遍，并预览3D效果。

//BoxGeometry：长方体
const geometry = new THREE.BoxGeometry(100, 100, 100);
// SphereGeometry：球体
const geometry = new THREE.SphereGeometry(50);
// CylinderGeometry：圆柱
const geometry = new THREE.CylinderGeometry(50,50,100);
// PlaneGeometry：矩形平面
const geometry = new THREE.PlaneGeometry(100,50);
// CircleGeometry：圆形平面
const geometry = new THREE.CircleGeometry(50);

双面可见

Three.js的材质默认正面可见，反面不可见,对于矩形平面PlaneGeometry、圆形平面如果你想看到两面，可以设置side: THREE.DoubleSide。

new THREE.MeshBasicMaterial({
    side: THREE.FrontSide, //默认只有正面可见
});

new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide, //两面可见
});

3D建模学习工作室

上一篇：Three.js教程：阵列立方体和相机适配体验 (mvrlink.com)

下一篇：Three.js教程：高光网格材质Phong (mvrlink.com)