Three.js Tutorial: Introduction to Threejs Common Geometries

Recommended: Add NSDT Scene Editor to your 3D toolchain

Other series of tools: NSDT Jianshi digital twin

Introduction to Threejs common geometry

Three.js provides many geometry APIs. In this lesson, I will introduce a few relatively simple cases to lay the foundation for later learning.

You can combine the threejs documentation to test all the geometry-related codes below and preview the 3D effect.

//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);

Visible on both sides

The material of Three.js is visible on the front side by default, and invisible on the back side. For rectangular planes PlaneGeometryand circular planes, if you want to see both sides, you can set it side: THREE.DoubleSide.

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

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

3D Modeling Learning Studio

Previous: Three.js Tutorial: Array Cube and Camera Adaptation Experience (mvrlink.com)

Next: Three.js Tutorial: Highlight Mesh Material Phong (mvrlink.com)