Published
Edited
Jan 7, 2021
sphere = {
const material = new THREE.MeshPhongMaterial({ wireframe: true })
const geometry = new THREE.SphereGeometry(sphere_radius, 20, 20)
return new THREE.Mesh(geometry, material)
}
cone = {
const phi = THREE.Math.randFloat(0, Math.PI * 2),
theta = THREE.Math.randFloat(0, Math.PI * 2),
normal = new THREE.Vector3().setFromSphericalCoords(sphere_radius, phi, theta).normalize()
// ----------------------- //
const cone_radius = sphere_radius / 20,
cone_height = sphere_radius / 4,
cone_radial_segments = 20,
cone_height_segments = 20
const material = new THREE.MeshNormalMaterial()
const geometry = new THREE.ConeGeometry(cone_radius, cone_height, cone_radial_segments, cone_height_segments)
//!!! rotate the cone geometry to be aligned properly! FFFFSSSS
geometry.rotateX( THREE.Math.degToRad(90) )
// create the cone object
const cone = new THREE.Mesh(geometry, material)
// make the cone face outward - towards its location on the sphere
cone.lookAt(normal)
// move on the normal vector by sphere radius + half the cone length
cone.position.copy(normal).multiplyScalar(sphere_radius + cone_height/2)
// add the cone to the sphere - so they rotate together when rotating the sphere
sphere.add(cone)
return cone
}
scene = {
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xffffff)
const light = new THREE.AmbientLight( 0x606060 ) // soft white
scene.add(light)
scene.add(sphere)
return scene
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
