three-player-controller 0.1.8 → 0.2.0

package/README.md

@@ -1,28 +1,29 @@
 # three-player-controller
 
-A lightweight third-person / first-person player controller, ready to use out of the box, based on three.js and three-mesh-bvh. It implements capsule-based character collision, BVH collision detection, character animations, first/third-person switching, and camera obstacle avoidance. This repository contains the library source code and example demos.
+轻量的第三人称 / 第一人称玩家控制器，开箱即用，基于 three.js 和 three-mesh-bvh 实现人物胶囊体碰撞、BVH 碰撞检测、人物动画、第一/三人称切换与相机避障。此仓库包含库源码、example 演示。
 
-# Installation
+# 安装
 
 npm install three-player-controller
 
-# Demo
+# 示例
 
 [Player Controller](https://hh-hang.github.io/three-player-controller/)
 
-### Controls
+### 控制
 
-![Controls](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/1.gif)
+![控制演示](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/1.gif)
 
-### fly
+### 飞行
 
-![fly](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/3.gif)
+![飞行](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/3.gif)
 
-### Third-person camera obstacle avoidance
+### 3DTiles 漫游
 
-![Third-person camera obstacle avoidance](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/2.gif)
+![3DTiles 漫游](https://github.com/hh-hang/three-player-controller/blob/master/example/public/gif/4.gif)
 
-# Usage
+
+# 使用
 
 ```js
 import * as THREE from "three";
@@ -30,27 +31,27 @@ import { playerController } from "three-player-controller";
 
 const player = playerController();
 
-// Initialize the player controller
+// 初始化玩家控制器
 player.init({
-  scene, // three.js scene
-  camera, // three.js camera
-  controls, // three.js controls
+  scene, // three.js 场景
+  camera, // three.js 相机
+  controls, // three.js 控制器
   playerModel: {
-    url: "./glb/person.glb", // model path
-    scale: 0.001, // model scale
-    idleAnim: "Idle_2", // idle animation name
-    walkAnim: "Walking_11", // walk animation name
-    runAnim: "Running_9", // run animation name
-    jumpAnim: "Jump_3", // jump animation name
+    url: "./glb/person.glb", // 模型路径
+    scale: 0.001, // 模型缩放
+    idleAnim: "Idle_2", // 默认 Idle 动画名字
+    walkAnim: "Walking_11", // 默认 Walk 动画名字
+    runAnim: "Running_9", // 默认 Run 动画名字
+    jumpAnim: "Jump_3", // 默认 Jump 动画名字
   },
-  initPos: pos, // initial position
+  initPos: pos, // 初始位置
 });
 
-// Call in the render loop
+// 渲染循环调用
 player.update();
 ```
 
-# Thanks
+# 感谢
 
 [three-mesh-bvh](https://github.com/gkjohnson/three-mesh-bvh)
 

package/dist/index.d.mts

@@ -24,6 +24,8 @@ declare function playerController(): {
         };
         initPos?: THREE.Vector3;
         mouseSensity?: number;
+        minCamDistance?: number;
+        maxCamDistance?: number;
     }, callback?: () => void) => Promise<void>;
     changeView: () => void;
     createBVH: (url?: string) => Promise<void>;

package/dist/index.d.ts

@@ -24,6 +24,8 @@ declare function playerController(): {
         };
         initPos?: THREE.Vector3;
         mouseSensity?: number;
+        minCamDistance?: number;
+        maxCamDistance?: number;
     }, callback?: () => void) => Promise<void>;
     changeView: () => void;
     createBVH: (url?: string) => Promise<void>;

package/dist/index.js

@@ -42,6 +42,7 @@ var import_RoundedBoxGeometry = require("three/examples/jsm/geometries/RoundedBo
 var import_DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader.js");
 var import_GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader.js");
 var BufferGeometryUtils = __toESM(require("three/examples/jsm/utils/BufferGeometryUtils.js"));
+THREE.Mesh.prototype.raycast = import_three_mesh_bvh.acceleratedRaycast;
 var controllerInstance = null;
 var clock = new THREE.Clock();
 var PlayerController = class {
@@ -81,6 +82,7 @@ var PlayerController = class {
     // 摄像机最小距离
     this._maxCamDistance = 4.4;
     // 摄像机最大距离
+    this.orginMaxCamDistance = 4.4;
     //  物理/运动
     this.playerVelocity = new THREE.Vector3();
     // 玩家速度向量
@@ -101,11 +103,17 @@ var PlayerController = class {
     this.DIR_BKD = new THREE.Vector3(0, 0, 1);
     this.DIR_LFT = new THREE.Vector3(-1, 0, 0);
     this.DIR_RGT = new THREE.Vector3(1, 0, 0);
-    this.DIR_Y = new THREE.Vector3(0, 1, 0);
+    this.DIR_UP = new THREE.Vector3(0, 1, 0);
     this._personToCam = new THREE.Vector3();
     this._originTmp = new THREE.Vector3();
-    this._raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, -1, 0));
-    this._raycasterPersonToCam = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3());
+    this._raycaster = new THREE.Raycaster(
+      new THREE.Vector3(),
+      new THREE.Vector3(0, -1, 0)
+    );
+    this._raycasterPersonToCam = new THREE.Raycaster(
+      new THREE.Vector3(),
+      new THREE.Vector3()
+    );
     // 键盘按下事件
     this._boundOnKeydown = async (e) => {
       if (e.ctrlKey && (e.code === "KeyW" || e.code === "KeyA" || e.code === "KeyS" || e.code === "KeyD")) {
@@ -133,8 +141,8 @@ var PlayerController = class {
           this.setAnimationByPressed();
           break;
         case "Space":
-          if (!this.playerIsOnGround || this.isFlying) return;
           this.spacePressed = true;
+          if (!this.playerIsOnGround || this.isFlying) return;
           this.playPersonAnimationByName("jumping");
           this.playerVelocity.y = this.jumpHeight;
           this.playerIsOnGround = false;
@@ -175,6 +183,7 @@ var PlayerController = class {
           this.setAnimationByPressed();
           break;
         case "Space":
+          this.spacePressed = false;
           break;
         case "ControlLeft":
           this.ctPressed = false;
@@ -183,14 +192,14 @@ var PlayerController = class {
     };
     // 根据按键设置人物动画
     this.setAnimationByPressed = () => {
-      this._maxCamDistance = 440 * this.playerModel.scale;
+      this._maxCamDistance = this.orginMaxCamDistance;
       if (this.isFlying) {
         if (!this.fwdPressed) {
           this.playPersonAnimationByName("flyidle");
           return;
         }
         this.playPersonAnimationByName("flying");
-        this._maxCamDistance = 700 * this.playerModel.scale;
+        this._maxCamDistance = this.orginMaxCamDistance * 2;
         return;
       }
       if (this.playerIsOnGround) {
@@ -237,7 +246,11 @@ var PlayerController = class {
         const yaw = -e.movementX * 1e-4 * this.mouseSensity;
         const pitch = -e.movementY * 1e-4 * this.mouseSensity;
         this.player.rotateY(yaw);
-        this.camera.rotation.x = THREE.MathUtils.clamp(this.camera.rotation.x + pitch, -1.3, 1.4);
+        this.camera.rotation.x = THREE.MathUtils.clamp(
+          this.camera.rotation.x + pitch,
+          -1.3,
+          1.4
+        );
       } else {
         const sensitivity = 1e-4 * this.mouseSensity;
         const deltaX = -e.movementX * sensitivity;
@@ -253,12 +266,17 @@ var PlayerController = class {
         const newX = distance * Math.sin(phi) * Math.sin(theta);
         const newY = distance * Math.cos(phi);
         const newZ = distance * Math.sin(phi) * Math.cos(theta);
-        this.camera.position.set(target.x + newX, target.y + newY, target.z + newZ);
+        this.camera.position.set(
+          target.x + newX,
+          target.y + newY,
+          target.z + newZ
+        );
         this.camera.lookAt(target);
       }
     };
     this._mouseClick = (e) => {
-      if (document.pointerLockElement !== document.body) document.body.requestPointerLock();
+      if (document.pointerLockElement !== document.body)
+        document.body.requestPointerLock();
     };
     this._raycaster.firstHitOnly = true;
     this._raycasterPersonToCam.firstHitOnly = true;
@@ -278,8 +296,9 @@ var PlayerController = class {
     this.playerSpeed = opts.playerModel.speed ? opts.playerModel.speed * s : 400 * s;
     this._camCollisionLerp = 0.18;
     this._camEpsilon = 35 * s;
-    this._minCamDistance = 100 * s;
-    this._maxCamDistance = 440 * s;
+    this._minCamDistance = opts.minCamDistance ? opts.minCamDistance * s : 100 * s;
+    this._maxCamDistance = opts.maxCamDistance ? opts.maxCamDistance * s : 440 * s;
+    this.orginMaxCamDistance = this._maxCamDistance;
     await this.createBVH();
     this.createPlayer();
     await this.loadPersonGLB();
@@ -296,15 +315,25 @@ var PlayerController = class {
     this.isFirstPerson = !this.isFirstPerson;
     if (this.isFirstPerson) {
       this.player.attach(this.camera);
-      this.camera.position.set(0, 40 * this.playerModel.scale, 30 * this.playerModel.scale);
+      this.camera.position.set(
+        0,
+        40 * this.playerModel.scale,
+        30 * this.playerModel.scale
+      );
       this.camera.rotation.set(0, Math.PI, 0);
       document.body.requestPointerLock();
     } else {
       this.scene.attach(this.camera);
       const worldPos = this.player.position.clone();
-      const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(this.player.quaternion);
+      const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(
+        this.player.quaternion
+      );
       const angle = Math.atan2(dir.z, dir.x);
-      const offset = new THREE.Vector3(Math.cos(angle) * 400 * this.playerModel.scale, 200 * this.playerModel.scale, Math.sin(angle) * 400 * this.playerModel.scale);
+      const offset = new THREE.Vector3(
+        Math.cos(angle) * 400 * this.playerModel.scale,
+        200 * this.playerModel.scale,
+        Math.sin(angle) * 400 * this.playerModel.scale
+      );
       this.camera.position.copy(worldPos).add(offset);
       this.controls.target.copy(worldPos);
       document.body.requestPointerLock();
@@ -313,12 +342,22 @@ var PlayerController = class {
   // 摄像机/控制器设置
   setCameraPos() {
     if (this.isFirstPerson) {
-      this.camera.position.set(0, 40 * this.playerModel.scale, 30 * this.playerModel.scale);
+      this.camera.position.set(
+        0,
+        40 * this.playerModel.scale,
+        30 * this.playerModel.scale
+      );
     } else {
       const worldPos = this.player.position.clone();
-      const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(this.player.quaternion);
+      const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(
+        this.player.quaternion
+      );
       const angle = Math.atan2(dir.z, dir.x);
-      const offset = new THREE.Vector3(Math.cos(angle) * 400 * this.playerModel.scale, 200 * this.playerModel.scale, Math.sin(angle) * 400 * this.playerModel.scale);
+      const offset = new THREE.Vector3(
+        Math.cos(angle) * 400 * this.playerModel.scale,
+        200 * this.playerModel.scale,
+        Math.sin(angle) * 400 * this.playerModel.scale
+      );
       this.camera.position.copy(worldPos).add(offset);
     }
     this.camera.updateProjectionMatrix();
@@ -330,6 +369,7 @@ var PlayerController = class {
   }
   // 重置控制器
   resetControls() {
+    if (!this.controls) return;
     this.controls.enabled = true;
     this.controls.enablePan = true;
     this.controls.maxPolarAngle = Math.PI / 2;
@@ -344,7 +384,9 @@ var PlayerController = class {
   // 初始化加载器
   async initLoader() {
     const dracoLoader = new import_DRACOLoader.DRACOLoader();
-    dracoLoader.setDecoderPath("https://unpkg.com/three@0.180.0/examples/jsm/libs/draco/gltf/");
+    dracoLoader.setDecoderPath(
+      "https://unpkg.com/three@0.180.0/examples/jsm/libs/draco/gltf/"
+    );
     dracoLoader.setDecoderConfig({ type: "js" });
     this.loader.setDRACOLoader(dracoLoader);
   }
@@ -360,21 +402,34 @@ var PlayerController = class {
       this.person.traverse((child) => {
         if (child.isMesh) {
           child.castShadow = true;
+          const mat = child.material;
+          if (!mat) return;
+          const mats = Array.isArray(mat) ? mat : [mat];
+          mats.forEach((m) => {
+          });
         }
       });
       this.player.add(this.person);
       this.reset();
       this.personMixer = new THREE.AnimationMixer(this.person);
       const animations = gltf.animations ?? [];
-      console.log("animations", animations);
       this.personActions = /* @__PURE__ */ new Map();
       const findClip = (name) => animations.find((a) => a.name === name);
       const regs = [
         [this.playerModel.idleAnim, "idle"],
         [this.playerModel.walkAnim, "walking"],
-        [this.playerModel.leftWalkAnim || this.playerModel.walkAnim, "left_walking"],
-        [this.playerModel.rightWalkAnim || this.playerModel.walkAnim, "right_walking"],
-        [this.playerModel.backwardAnim || this.playerModel.walkAnim, "walking_backward"],
+        [
+          this.playerModel.leftWalkAnim || this.playerModel.walkAnim,
+          "left_walking"
+        ],
+        [
+          this.playerModel.rightWalkAnim || this.playerModel.walkAnim,
+          "right_walking"
+        ],
+        [
+          this.playerModel.backwardAnim || this.playerModel.walkAnim,
+          "walking_backward"
+        ],
         [this.playerModel.jumpAnim, "jumping"],
         [this.playerModel.runAnim, "running"],
         [this.playerModel.flyIdleAnim || this.playerModel.idleAnim, "flyidle"],
@@ -463,20 +518,29 @@ var PlayerController = class {
     material.depthWrite = false;
     const r = this.playerRadius * this.playerModel.scale;
     const h = this.playerHeight * this.playerModel.scale;
-    this.player = new THREE.Mesh(new import_RoundedBoxGeometry.RoundedBoxGeometry(r * 2, h, r * 2, 1, 75), material);
+    this.player = new THREE.Mesh(
+      new import_RoundedBoxGeometry.RoundedBoxGeometry(r * 2, h, r * 2, 1, 75),
+      material
+    );
     this.player.geometry.translate(0, -h * 0.25, 0);
     this.player.capsuleInfo = {
       radius: r,
-      segment: new THREE.Line3(new THREE.Vector3(), new THREE.Vector3(0, -h * 0.5, 0))
+      segment: new THREE.Line3(
+        new THREE.Vector3(),
+        new THREE.Vector3(0, -h * 0.5, 0)
+      )
     };
     this.player.name = "capsule";
     this.scene.add(this.player);
     this.reset();
   }
+  // 获取法线与Y轴的夹角
   getAngleWithYAxis(normal) {
     const yAxis = { x: 0, y: 1, z: 0 };
     const dotProduct = normal.x * yAxis.x + normal.y * yAxis.y + normal.z * yAxis.z;
-    const normalMagnitude = Math.sqrt(normal.x * normal.x + normal.y * normal.y + normal.z * normal.z);
+    const normalMagnitude = Math.sqrt(
+      normal.x * normal.x + normal.y * normal.y + normal.z * normal.z
+    );
     const yAxisMagnitude = 1;
     const cosTheta = dotProduct / (normalMagnitude * yAxisMagnitude);
     return Math.acos(cosTheta);
@@ -484,8 +548,9 @@ var PlayerController = class {
   // 每帧更新
   async update(delta = clock.getDelta()) {
     if (!this.isupdate || !this.player || !this.collider) return;
-    delta = Math.min(delta, 1 / 60);
-    if (!this.isFlying) this.player.position.addScaledVector(this.playerVelocity, delta);
+    delta = Math.min(delta, 1 / 30);
+    if (!this.isFlying)
+      this.player.position.addScaledVector(this.playerVelocity, delta);
     this.updateMixers(delta);
     this.camera.getWorldDirection(this.camDir);
     let angle = Math.atan2(this.camDir.z, this.camDir.x) + Math.PI / 2;
@@ -495,8 +560,15 @@ var PlayerController = class {
     if (this.bkdPressed) this.moveDir.add(this.DIR_BKD);
     if (this.lftPressed) this.moveDir.add(this.DIR_LFT);
     if (this.rgtPressed) this.moveDir.add(this.DIR_RGT);
-    if (this.isFlying && this.fwdPressed) {
-      this.moveDir.y = this.camDir.y;
+    if (this.isFlying) {
+      if (this.fwdPressed) {
+        this.moveDir.y = this.camDir.y;
+      } else {
+        this.moveDir.y = 0;
+      }
+      if (this.spacePressed) {
+        this.moveDir.add(this.DIR_UP);
+      }
     }
     if (this.isFlying && this.fwdPressed) {
       this.playerSpeed = this.shiftPressed ? 4e3 * this.playerModel.scale : 3e3 * this.playerModel.scale;
@@ -504,11 +576,21 @@ var PlayerController = class {
       this.playerSpeed = this.shiftPressed ? 900 * this.playerModel.scale : 400 * this.playerModel.scale;
     }
     this.moveDir.normalize().applyAxisAngle(this.upVector, angle);
-    this.player.position.addScaledVector(this.moveDir, this.playerSpeed * delta);
+    this.player.position.addScaledVector(
+      this.moveDir,
+      this.playerSpeed * delta
+    );
     let playerDistanceFromGround = Infinity;
-    this._originTmp.set(this.player.position.x, this.player.position.y, this.player.position.z);
+    this._originTmp.set(
+      this.player.position.x,
+      this.player.position.y,
+      this.player.position.z
+    );
     this._raycaster.ray.origin.copy(this._originTmp);
-    const intersects = this._raycaster.intersectObject(this.collider, false);
+    const intersects = this._raycaster.intersectObject(
+      this.collider,
+      false
+    );
     if (intersects.length > 0) {
       playerDistanceFromGround = this.player.position.y - intersects[0].point.y;
       const normal = intersects[0].normal;
@@ -536,7 +618,11 @@ var PlayerController = class {
           this.playerIsOnGround = true;
         } else if (playerDistanceFromGround < minH) {
           this.playerVelocity.set(0, 0, 0);
-          this.player.position.set(this.player.position.x, intersects[0].point.y + h, this.player.position.z);
+          this.player.position.set(
+            this.player.position.x,
+            intersects[0].point.y + h,
+            this.player.position.z
+          );
           this.playerIsOnGround = true;
         }
       }
@@ -559,7 +645,11 @@ var PlayerController = class {
       intersectsTriangle: (tri) => {
         const triPoint = this.tempVector;
         const capsulePoint = this.tempVector2;
-        const distance = tri.closestPointToSegment(this.tempSegment, triPoint, capsulePoint);
+        const distance = tri.closestPointToSegment(
+          this.tempSegment,
+          triPoint,
+          capsulePoint
+        );
         if (distance < capsuleInfo.radius) {
           const depth = capsuleInfo.radius - distance;
           const direction = capsulePoint.sub(triPoint).normalize();
@@ -569,11 +659,14 @@ var PlayerController = class {
       }
     });
     const newPosition = this.tempVector.copy(this.tempSegment.start).applyMatrix4(this.collider.matrixWorld);
-    const deltaVector = this.tempVector2.subVectors(newPosition, this.player.position);
+    const deltaVector = this.tempVector2.subVectors(
+      newPosition,
+      this.player.position
+    );
     const offset = Math.max(0, deltaVector.length() - 1e-5);
     deltaVector.normalize().multiplyScalar(offset);
     this.player.position.add(deltaVector);
-    if (!this.isFirstPerson && this.moveDir.lengthSq() > 0) {
+    if (!this.isFirstPerson && this.moveDir.lengthSq() > 0 && !this.isFlying) {
       this.camDir.y = 0;
       this.camDir.normalize();
       this.camDir.negate();
@@ -585,6 +678,18 @@ var PlayerController = class {
       const alpha = Math.min(1, this.rotationSpeed * delta);
       this.player.quaternion.slerp(this.targetQuat, alpha);
     }
+    if (this.isFlying) {
+      this.camDir.y = 0;
+      this.camDir.normalize();
+      this.camDir.negate();
+      this.moveDir.normalize();
+      this.moveDir.negate();
+      const lookTarget = this.player.position.clone().add(this.fwdPressed ? this.moveDir : this.camDir);
+      this.targetMat.lookAt(this.player.position, lookTarget, this.player.up);
+      this.targetQuat.setFromRotationMatrix(this.targetMat);
+      const alpha = Math.min(1, this.rotationSpeed * delta);
+      this.player.quaternion.slerp(this.targetQuat, alpha);
+    }
     if (!this.isFirstPerson) {
       const lookTarget = this.player.position.clone();
       lookTarget.y += 30 * this.playerModel.scale;
@@ -598,15 +703,24 @@ var PlayerController = class {
       const desiredDist = this._personToCam.length();
       this._raycasterPersonToCam.set(origin, direction);
       this._raycasterPersonToCam.far = desiredDist;
-      const intersects2 = this._raycasterPersonToCam.intersectObject(this.collider, false);
+      const intersects2 = this._raycasterPersonToCam.intersectObject(
+        this.collider,
+        false
+      );
       if (intersects2.length > 0) {
         const hit = intersects2[0];
-        const safeDist = Math.max(hit.distance - this._camEpsilon, this._minCamDistance);
+        const safeDist = Math.max(
+          hit.distance - this._camEpsilon,
+          this._minCamDistance
+        );
         const targetCamPos = origin.clone().add(direction.clone().multiplyScalar(safeDist));
         this.camera.position.lerp(targetCamPos, this._camCollisionLerp);
       } else {
         this._raycasterPersonToCam.far = this._maxCamDistance;
-        const intersectsMaxDis = this._raycasterPersonToCam.intersectObject(this.collider, false);
+        const intersectsMaxDis = this._raycasterPersonToCam.intersectObject(
+          this.collider,
+          false
+        );
         let safeDist = this._maxCamDistance;
         if (intersectsMaxDis.length) {
           const hitMax = intersectsMaxDis[0];
@@ -617,15 +731,34 @@ var PlayerController = class {
       }
     }
     if (this.player.position.y < this.boundingBoxMinY - 1) {
-      this._originTmp.set(this.player.position.x, 1e4, this.player.position.z);
+      this._originTmp.set(
+        this.player.position.x,
+        1e4,
+        this.player.position.z
+      );
       this._raycaster.ray.origin.copy(this._originTmp);
-      const intersects2 = this._raycaster.intersectObject(this.collider, false);
+      const intersects2 = this._raycaster.intersectObject(
+        this.collider,
+        false
+      );
       if (intersects2.length > 0) {
         console.log("\u73A9\u5BB6\u4E3Abug\u610F\u5916\u6389\u843D");
-        this.reset(new THREE.Vector3(this.player.position.x, intersects2[0].point.y + 5, this.player.position.z));
+        this.reset(
+          new THREE.Vector3(
+            this.player.position.x,
+            intersects2[0].point.y + 5,
+            this.player.position.z
+          )
+        );
       } else {
         console.log("\u73A9\u5BB6\u6B63\u5E38\u6389\u843D");
-        this.reset(new THREE.Vector3(this.player.position.x, this.player.position.y + 15, this.player.position.z));
+        this.reset(
+          new THREE.Vector3(
+            this.player.position.x,
+            this.player.position.y + 15,
+            this.player.position.z
+          )
+        );
       }
     }
   }
@@ -729,7 +862,8 @@ var PlayerController = class {
             attrMap.set(name, { itemSize, arrayCtor: ctor, examples: 1 });
           } else {
             const m = attrMap.get(name);
-            if (m.itemSize !== itemSize || m.arrayCtor !== ctor) attrConflict.add(name);
+            if (m.itemSize !== itemSize || m.arrayCtor !== ctor)
+              attrConflict.add(name);
             else m.examples++;
           }
         }
@@ -750,7 +884,10 @@ var PlayerController = class {
             const meta = attrMap.get(name);
             const len = count * meta.itemSize;
             const array = new meta.arrayCtor(len);
-            g.setAttribute(name, new THREE.BufferAttribute(array, meta.itemSize));
+            g.setAttribute(
+              name,
+              new THREE.BufferAttribute(array, meta.itemSize)
+            );
           }
         }
       }