THREEJS-使网格垂直于其所在的球面

Question

// THREEJS RELATED VARIABLES

var scene, camera, renderer, container, controls, raycaster, sphere_radius, HEIGHT, WIDTH;

//INIT THREE JS, SCREEN AND MOUSE EVENTS

function createScene() {

	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

	scene = new THREE.Scene();
	aspectRatio = WIDTH / HEIGHT;
	camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 1, 10000);

	camera.position.x = 0;
	camera.position.z = 1500;
	camera.position.y = 0;

	// ORBIT CAMERA
	controls = new THREE.OrbitControls( camera );
	controls.update();

	renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
	renderer.setSize(WIDTH, HEIGHT);
	container = document.getElementById('world');
	container.appendChild(renderer.domElement);

	
}
function randomSpherePoint(x0,y0,z0,radius){
   var u = Math.random();
   var v = Math.random();
   var theta = 2 * Math.PI * u;
   var phi = Math.acos(2 * v - 1);
   var x = x0 + (radius * Math.sin(phi) * Math.cos(theta));
   var y = y0 + (radius * Math.sin(phi) * Math.sin(theta));
   var z = z0 + (radius * Math.cos(phi));
   return [x,y,z];
}

Island = function(){
	this.mesh = new THREE.Object3D();
	// number of cubes
	this.nLands = 30;
	this.lands = [];

	
	for(var i = 0; i < this.nLands; i++){
		var c = new Land();
		this.lands.push(c);
    
		var stepAngle = Math.PI*2 * Math.random();
		var a = stepAngle*i;
		var h = sphere_radius;

		var randPos = randomSpherePoint(0,0,0,sphere_radius);
		c.mesh.position.y = randPos[1];
		c.mesh.position.x = randPos[0];
		c.mesh.position.z = randPos[2];


		this.mesh.add(c.mesh);
	}
}

Land = function(){
	this.mesh = new THREE.Object3D();
	this.mesh.name = "land";


	var geom = new THREE.CylinderGeometry( 2, 2, 50, 64 );

	var mat = new THREE.MeshPhongMaterial({color:0x59332e});

	var m = new THREE.Mesh(geom.clone(), mat);
	m.position.x = 0;
	m.position.y = Math.random()*2;
	m.position.z = Math.random()*10;
	this.mesh.add(m);
}



Sea = function(){
	// radius top, radius bottom, height, number of segments on the radius, number of segments vertically
	sphere_radius = 300;
	var geom = new THREE.SphereGeometry(sphere_radius,sphere_radius,32,32);


	var mat = new THREE.MeshNormalMaterial({
		transparent:true,
		opacity:.5,
		flatShading:true,
	});
	this.mesh = new THREE.Mesh(geom, mat);
	this.mesh.name = "sea";
}

// 3D Models
var sea;

function createSea(){
	sea = new Sea();
	sea.mesh.position.y = 0;
	scene.add(sea.mesh);
}


function createIsland(){
	island = new Island();
	island.mesh.position.y = 0;
	scene.add(island.mesh);
}

function loop(){	

	renderer.render(scene, camera);
	requestAnimationFrame(loop);
	
}

function init(event){

	createScene();
	createSea();
	createIsland();
	loop();
}


window.addEventListener('load', init, false);


function handleWindowResize() {
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;
	renderer.setSize(WIDTH, HEIGHT);
	camera.aspect = WIDTH / HEIGHT;
	camera.updateProjectionMatrix();
}
window.addEventListener('resize', handleWindowResize, false);

html, body {
	overflow: hidden;
	margin:0;
	padding:0;
}

<div id="world"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r94/js/controls/OrbitControls.js"></script>

相关的密码笔： https://codepen.io/farisk/pen/zLymrz

在three.js上，我在cylinders外部的随机位置上添加了一堆sphere。

我现在遇到的问题是它们都直面对z轴。

我认为我应该做的是使圆柱lookAt与圆柱相交于球体的角度。但是我不确定如何实现这一目标。任何帮助表示赞赏。

这里有描述情况的图像。