Three.js 在 OBJ（缓冲几何）的每个顶点（属性）上放置一个粒子

Question

我正在尝试在 Three.js 中的 OBJ 模型的每个顶点上放置粒子。 期望的结果应该是这样的

https://codepen.io/consolacao/pen/Cdjmi

控制台显示我的 OBJ 已经正常加载，它可以访问 OBJ 模型的属性...但是屏幕上什么都没有显示

我尝试过更改模型，从缓冲区几何更改为几何......但没有运气

谁能帮帮我？

  var manager = new THREE.LoadingManager();
  manager.onProgress = function ( item, loaded, total ) {
    console.log('webgl, twice??');
    console.log( item, loaded, total );
  };


 var p_geom = new THREE.BufferGeometry();
 var p_material = new THREE.PointsMaterial({
  color: 0xd48908
 });


function loadModel() {

const loader = new OBJLoader(manager);

loader.load ('src/models/faceyface.obj', function (face) {

  face.position.y = 10;

    face.traverse( function ( child ) {

        if (child.isMesh) {

            

            var position = child.geometry.getAttribute('position');
            var normal = child.geometry.getAttribute('normal');
            

            for (let i=0; i< position.array.length; i+=3) {

                    const pos = new THREE.Vector3(position.array[i],
                          position.array[i+1],
                          position.array[i+2]);

                    const norm = new THREE.Vector3(normal.array[i],
                         normal.array[i+1],
                         normal.array[i+2]);

                    p_geom.position.copy(pos);

                    var particles = new THREE.Points(p_geom, 
                    p_material);
                    
                    const target = 
                    pos.clone().add(norm.multiplyScalar(10.0));
                    particles.lookAt(target);
                                    
            }

            scene.add(particles)   

        }
    })
});

}

Answer 1

下面是一个示例，说明如何实现预期结果：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";
import { OBJLoader } from 'https://threejs.org/examples/jsm/loaders/OBJLoader.js';
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 35);
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x222222);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

const loader = new OBJLoader();
loader.load( "https://threejs.org/examples/models/obj/ninja/ninjaHead_Low.obj", function ( group ) {
  
  //console.log(group);
  
  let pts = [];
  let v3 = new THREE.Vector3();
  group.traverse(child => {
    if (child.isMesh){
      let pos = child.geometry.attributes.position;
      for (let i = 0; i < pos.count; i++){
        v3.fromBufferAttribute(pos, i);
        pts.push(v3.clone());
      }
    }
  });
  
  let g = new THREE.BufferGeometry().setFromPoints(pts);
  g.center();
  let m = new THREE.PointsMaterial({color: "aqua", size: 0.25});
  
  let p = new THREE.Points(g, m);
  scene.add(p);

} );

renderer.setAnimationLoop(()=>{
  renderer.render(scene, camera);
});
</script>