JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
JavaScript
var sphere, camera, scene, renderer;
var geometry, material, mesh, targetPoint, clickSpherePoint;
var pointGeometry = new THREE.SphereGeometry(0.01, 5, 5);
var pointMaterial = new THREE.MeshPhongMaterial({color:0x96d9dd});
var rotateInc = 0.001;
init();
animate();
function init() {
document.addEventListener("click", checkSphereClick, false);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var segments = 100;
var sphereMatherial = new THREE.MeshPhongMaterial({color: 0xff00ff, transparent: false});
var sphereGeometry = new THREE.SphereGeometry (0.3, segments, segments);
sphere = new THREE.Mesh(sphereGeometry, sphereMatherial);
scene.add(sphere);
//container.add( sphere );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function checkSphereClick (e) {
var raycaster = new THREE.Raycaster();
var mouse = {
x: ((event.clientX - 1) / window.innerWidth ) * 2 - 1,
y: -((event.clientY - 1) / window.innerHeight) * 2 + 1
};
var vector = new THREE.Vector3();
vector.set(mouse.x, mouse.y, 0.5);
vector.unproject(camera);
raycaster.ray.set(camera.position, vector.sub(camera.position).normalize());
let target = raycaster.intersectObjects([sphere]);
if (target.length) displayClickSpherePoint (target[0]);
}
function displayClickSpherePoint (target) {
if (clickSpherePoint) sphere.remove(clickSpherePoint);
clickSpherePoint = new THREE.Mesh(pointGeometry, pointMaterial);
clickSpherePoint.position.copy(target.point);
sphere.add (clickSpherePoint);
}
function animate() {
requestAnimationFrame( animate );
sphere.rotation.x +=...