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)

猜你喜欢

转载自blog.csdn.net/ygtu2018/article/details/131337789