在三.js中将球体几何图形上的部分指向

Point a partical on a sphere geometry in three.js

本文关键字:几何图形 js 在三      更新时间:2023-09-26

下面是我的片段,现在我想在球体上放置一个粒子。如何将局部和球体几何形状组合在一起?一旦实现了这一点,我想在球体顶部动态渲染粒子

      init();
      animate();
      function init() {
        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.z = 500;
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor( 0x000000 );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        scene = new THREE.Scene();
        loader = new THREE.TextureLoader();
        loader.load( '<%= image_path('earthmap1k.jpg') %>', function ( texture ) {
          geometry = new THREE.SphereGeometry( 200, 20, 20 );
          material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5, wireframe: true } );
          mesh = new THREE.Mesh( geometry, material );
          scene.add( mesh );
        } );
  function addPartical() {
    var distance = 200;
    ggeometry  = new THREE.Geometry();
    vertex     = new THREE.Vector3();
    theta      = THREE.Math.randFloatSpread(360);
    phi        = THREE.Math.randFloatSpread(360);
    vertex.x = distance * Math.sin(theta) * Math.cos(phi);
    vertex.y = distance * Math.sin(theta) * Math.sin(phi);
    vertex.z = distance * Math.cos(theta);
    ggeometry.vertices.push(vertex);
    particles = new THREE.Points(ggeometry, new THREE.PointsMaterial({color: 0xffffff}));
    particles.boundingSphere = 50;
    scene.add(particles);
  };
      }

      function animate() {
        requestAnimationFrame( animate );
        addParticle();
        render();
      }
      function render() {
        renderer.render( scene, camera );
      }

如果要将两个对象视为一个对象,请使用THREE.Object3D()并对其进行操作。