three objects are arranged in a spherical shape around the circumference

圆形

思路： A circle based on the specified radius and the angle at which the object is required to exist Calculate the coordinates of the point on the circle

/** * Generates a composition around a circle from a model */
export const modelSurround = (model: Object3D, radius: number, count: number) => {
    
    const group = new THREE.Group();
    const onceAngle = (Math.PI * 2) / 360; //一度
    const spaceAngle = (360 / count) * onceAngle; //The angle between two objects

    for (let i = 1; i <= count; i++) {
    
        const item = model.clone();
        const x = Math.sin(spaceAngle * i) * radius;
        const y = Math.cos(spaceAngle * i) * radius;
        item.position.set(x, y, 0);
        group.add(item);
    }
    return group;
};

调用

 const model = new THREE.Mesh(
	 new THREE.BoxGeometry(3, 3, 3),
	     new THREE.MeshPhongMaterial({
    
	         color: 0xa88afa,
	         flatShading: true,
	         side: THREE.DoubleSide,
	     })
	 );

 const roundModel = modelSurround(model, 10, 10);
 scene.add(roundModel);

球形

/** * Generates a composition around a circle from a model */
export const modelSurround = (model: Object3D, radius: number, count: number, column: number = 1) => {
    
    const group = new THREE.Group();
    const onceAngle = (Math.PI * 2) / 360; //一度
    const spaceAngle = (360 / count) * onceAngle; //The angle between two objects

    for (let l = 0; l < column; l++) {
    
        const columnGroup = new THREE.Group();
        for (let i = 0; i < count; i++) {
    
            const item = model.clone();
            const x = Math.sin(spaceAngle * i) * radius;
            const y = Math.cos(spaceAngle * i) * radius;
            item.position.set(x, y, 0);
            columnGroup.add(item);
        }
        columnGroup.rotation.y = (180 / column) * onceAngle * l;
        group.add(columnGroup);
    }

    return group;
};

调用

const model = new THREE.Mesh(
  new THREE.BoxGeometry(3, 3, 3),
     new THREE.MeshPhongMaterial({
    
         color: 0xa88afa,
         flatShading: true,
         side: THREE.DoubleSide,
     })
 );

 const roundModel = modelSurround(model, 10, 20, 8);
 roundModel.position.y = 70;
 scene.add(roundModel);

Specify radians generate semicircle

/** * Generates a composition around a circle from a model */
export const modelSurround = ({
    
    model,
    radius,
    count,
    radian = 360,
    column = 1,
}: {
    
    /** * 模型 */
    model: Object3D;
    /** * 半径 */
    radius: number;
    /** * 重复数量 */
    count: number;
    /** * Arrange in radians by default360度(一周) * @default 360 */
    radian?: number;
    /** * 绕yThe axis rotates several columns360Columns are spherical 默认1列 * @default 1 */
    column?: number;
}) => {
    
    const group = new THREE.Group();
    const onceAngle = (Math.PI * 2) / 360; //一度
    const spaceAngle = (radian / count) * onceAngle; //The angle between two objects

    for (let l = 0; l < column; l++) {
    
        const columnGroup = new THREE.Group();
        for (let i = 0; i < count; i++) {
    
            const item = model.clone();
            const x = Math.sin(spaceAngle * i) * radius;
            const y = Math.cos(spaceAngle * i) * radius;
            item.position.set(x, y, 0);
            columnGroup.add(item);
        }
        columnGroup.rotation.y = (180 / column) * onceAngle * l;
        group.add(columnGroup);
    }

    return group;
};

调用

  const model = new THREE.Mesh(
    new THREE.BoxGeometry(3, 3, 3),
     new THREE.MeshPhongMaterial({
    
         color: 0xa88afa,
         flatShading: true,
         side: THREE.DoubleSide,
     })
 );

 const roundModel = modelSurround({
     model, radius: 10, count: 10, radian: 90, column: 1 });
 roundModel.position.y = 70;
 scene.add(roundModel);

加入 Multiple models randomly choose permutations

/** * Generates a composition around a circle from a model */
export const modelSurround = ({
    
    model,
    radius,
    count,
    radian = 360,
    column = 1,
    syncRotation = false,
}: {
    
    /** * 模型 Or a function that returns a model */
    model: Object3D | (() => Object3D);
    /** * 半径 */
    radius: number;
    /** * 重复数量 */
    count: number;
    /** * Arrange in radians by default360度(一周) * @default 360 */
    radian?: number;
    /** * 绕yThe axis rotates several columns360Columns are spherical 默认1列 * @default 1 */
    column?: number;
    /** * The rotation angle rotates synchronously * @default false */
    syncRotation?: boolean;
}) => {
    
    const group = new THREE.Group();
    const onceAngle = (Math.PI * 2) / 360; //一度
    const spaceAngle = (radian / count) * onceAngle; //The angle between two objects

    for (let l = 0; l < column; l++) {
    
        const columnGroup = new THREE.Group();
        for (let i = 0; i < count; i++) {
    
            const item = typeof model === "function" ? model().clone() : model.clone();
            const x = Math.sin(spaceAngle * i) * radius;
            const y = Math.cos(spaceAngle * i) * radius;
            item.position.set(x, y, 0);
            columnGroup.add(item);
            syncRotation && (item.rotation.z = spaceAngle * -i);
        }
        columnGroup.rotation.y = (360 / column) * onceAngle * l;
        group.add(columnGroup);
    }

    return group;
};

调用 Pass in a randomly generated model

/** * Get the three brick model */
 const one = gltf.scene.getObjectByName("1");
 const two = gltf.scene.getObjectByName("2");
 const three = gltf.scene.getObjectByName("3");
 if (!one || !two || !three) return;
 const provider = [one, two, three];
 const {
     length: count } = provider;

 const space = getSize(one).z + 1;

 const blocksGroup = modelSurround({
    
     model: () => {
    
         const row = new Group();
         for (let i = 0; i < count; i++) {
    
             //A random model is obtained
             const model = provider[Math.floor(Math.random() * count)].clone();
             row.add(model);
             //这样 0,1,2 是 0 3,4,5 是 1 The orderly arrangement keeps the coordinates consistent
             const column = Math.floor(i / count);

             const x = column * space;
             const y = 0;
             const z = (i % count) * space;
             model.position.set(x, y, z);
         }
         return row;
     },
     count: 30,
     radius: 460 * 4,
     radian: 6,
     syncRotation: true,
     column: 4,
 });