ThreeJS教程:Threejs常见几何体简介

ThreeJS教程:Threejs常见几何体简介
推荐:将NSDT场景编辑器加入你的3D工具链
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建模学习工作室整理翻译,转载请标明出处!

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

下一篇:ThreeJS教程:高光网格材质Phong (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号