// *** scene and camera ***
// Create a three.js scene
var scene = new THREE.Scene();
// Add a camera so that we can see our 3D objects.
// By moving our camera's z positioning, we can increase or decrease zoom.
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
camera.position.z = 350;
scene.add(camera);
// *** objects ***
// Nucleus
// radius
// | width segments
// | | height segments
// | | |
// v v v
var shape = new THREE.SphereGeometry(100, 20, 20);
var cover = new THREE.MeshNormalMaterial();
var nucleus = new THREE.Mesh(shape, cover);
scene.add(nucleus);
// Electron 1
var electronShape = new THREE.SphereGeometry(20, 20, 20);
var electron1 = new THREE.Mesh(electronShape, cover);
nucleus.add(electron1);
// When we add our electron geometry to the nucleus, we can statically position objects.
// If the objects are dynamically moving, this has no effect.
// x, y, z
electron1.position.set(-150,150,0);
// Electron 2
var electron2 = new THREE.Mesh(electronShape, cover);
nucleus.add(electron2);
electron2.position.set(150,150,0);
// Electron 3
var electron3 = new THREE.Mesh(electronShape, cover);
nucleus.add(electron3);
electron3.position.set(0,0,150);
// *** renderer ***
// A canvas renderer will generate the image, drawing our models on the screen.
var renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// This places the CanvasRenderer onto the body element in our HTML.
document.body.appendChild(renderer.domElement);
// *** animation ***
// Animate motion using a clock timer.
var clock = new THREE.Clock();
// This function will handle animation of our atom
function animate() {
requestAnimationFrame(animate);
// This gives us a...
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Console
Debug your Fiddle with a minimal built-in JavaScript console.