Quaternion approach

dsfsdf

by mmansion

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/tween.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  margin:0;
  padding:0;
}

JavaScript

let camera, scene, renderer, controls;

var box, sphere, plane, animating, staticMesh, staticPoint, pointA, stop, camPoint;

var raycaster = new THREE.Raycaster()
const radius = 0.6;
var pickerPoint = new THREE.Vector3()
var angle, angleEnd, normal;

const center = new THREE.Vector3(0, 0, 0);

var texture = new THREE.TextureLoader().load( 'https://thumbs.dreamstime.com/b/world-map-texture-paper-isolated-white-backgroubd-45257355.jpg' );

init();
animate();

function init() {
	angle = 0
  center.normalize()
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 2;
	stop = false;
	var material = new THREE.MeshBasicMaterial( { map:texture  } );
  plane = new THREE.Mesh(new THREE.PlaneGeometry(0.09, 0.05, 5, 5), new THREE.MeshBasicMaterial({color: 'red', side: THREE.DoubleSide, wireframe: true}))
 
  scene = new THREE.Scene();

  sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, 20, 20), material);
  staticMesh = new THREE.Mesh(new THREE.SphereGeometry(radius + 0.1, 20, 20),
    new THREE.MeshBasicMaterial({
      wireframe: true,
      color: 'gray',
      transparent: true,
      opacity: 0.3
    }));
  camPoint = new THREE.Mesh(new THREE.SphereGeometry(0.01, 10 , 10), 
  												  new THREE.MeshBasicMaterial({ color: 'yellow'}))
  staticPoint = new THREE.Mesh(new THREE.SphereGeometry(0.01, 5, 5),
   														 new THREE.MeshBasicMaterial({ color: 'red'}))
   
//  staticPoint.position.set(0.4463811566432317, 0.3958899974822998, radius + 0.1)
  staticPoint.position.set(0,0,radius + 0.1);
  plane.lookAt(center);
  staticPoint.add(plane)
  staticMesh.add(staticPoint)
  scene.add(staticMesh)
  scene.add(sphere);

  box = new THREE.Mesh(new THREE.BoxGeometry(0.01, 0.01, 0.4),
    new THREE.MeshBasicMaterial({
      color: 'aqua',
      wireframe: true
    }));
  box.geometry.translate(0, 0, -0.2)
  box.position.set(0, 0, 1)

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
 ...