score:1
missing 4th sphere
you specify:
pivot1.rotation.z = 0;
pivot2.rotation.z = 2 * math.pi / 3;
pivot3.rotation.z = 4 * math.pi / 3;
pivot4.rotation.z = 6 * math.pi / 3;
6 * math.pi / 3
= 2 * math.pi
note, three.js uses radians, therefore 2 * pi
is 0
(a full revolution is the same place as no rotation.
so pivot1 and pivot4 have the same effective rotation and your 2 sphere end up in the same place in space.
speed
you currently handle speed by mutating the z rotation on every frame.
parent.rotation.z += 0.01;
this obviously works just fine for a demo. you can speed it up by moving more per frame (or getting more frames, ie better machine or other upgrades)
parent.rotation.z += 0.04;
now it rotates at 4 times the speed!
more spheres
once you get past working with counts larger than your number of fingers on a hand, i recommend getting generic with arrays. instead of listing out pivot1, pivot2, pivot3, . . . pivot0451
, generate this with a loop. (functionally you could use ranges if you prefer).
first, we declare how many spheres to make. then divide up the circle (2 * math.pi radians to go around). then for ever sphere, make a pivot. then, for every pivot, add a mesh. and you're done.
var numberofspheres = 10;
var radianspersphere = 2 * math.pi / numberofspheres;
// pivots
var pivots = [];
for (var i = 0; i < numberofspheres; i++) {
var pivot = new three.object3d();
pivot.rotation.z = i * radianspersphere;
parent.add(pivot);
pivots.push(pivot);
}
var meshes = pivots.map((pivot) => {
var mesh = new three.mesh(geometry, material);
mesh.position.y = 5;
pivot.add(mesh)
return mesh;
});
i implemented this at this codepen.io
happy coding.
Source: stackoverflow.com
Related Query
- Adding number of cubes in three.js
- Three.js better way of adding multiple cubes to a scene
- Three Js How To Map A Different Random Image On All Sides Of A Cube In A Group Of Cubes
- THREE JS DefaultLoadingManager onProgress function returns wrong number of total items first
- adding and updating velocity and acceleration in bufergeometry three js
- Adding normal maps to bufferGeometry shapes in THREE
- Custom Shader program rendering "N" number of cubes on canvas using Three.js?
- Adding a GLTF Model Into a Simple React Three Fiber Scene
- adding textures for dynamic 3d model in three js and wanted to understand animation of 3d model?
- Which is the best way to render large number of geometries in three js?
- Why the number of vertices of the exported obj model is three will become more
- Is there at TWO JS counterpart to THREE JS
- THREE.js Ray Intersect fails by adding div
- three js vertices does not update
- Three JS - Find all points where a mesh intersects a plane
- How make 3d text in three js
- Three.js - Uncaught ReferenceError: THREE is not defined
- Three JS Pivot point
- How To Animate Camera.lookAt using Three JS
- THREE js proper removing object from scene (still reserved in HEAP)
- Change color of mesh using mouseover in three js
- How do I move a Three JS cube with keyboard input?
- Three JS dashed line material not showing
- Three JS transparancy with ShaderMaterial
- three js clickable objects
- Three js memory management
- How to export and then import a scene with Three JS?
- Three JS Keep Label Size On Zoom
- Move camera backwards and forwards in Three js
- Dynamically Adding Vertices to a Line in Three.js
More Query from same tag
- I'm trying to animate a character's hair programatically. What's the best approach for this?
- load a dynamic generated stl
- Object always in front of camera
- Orbit Controls cannot initialize properly
- Can't get lightning to work
- Canvas in fullscreen hides my div elements
- Networked A-frame examples toggle video not working
- Three.js Change View of Scene by Clicking a Link
- Raycasting direction relative to global coordinate system , not local
- Resetting the camera far plane
- Alpha clipping / masking a plane using three js?
- Uncaught TypeError: vector.subSelf is not a function
- Accessing the vertices using the new PlaneBufferGeometry in ThreeJS
- Rotation about model's center after moving (pan) the model
- Why three.js pointcloud is not same rendering between mac and windows (Intel HD graphics 4000)?
- On loading Image, getImageData delivers some zeros
- How does position.set center a canvas image ?
- Update vertices geometry Threejs
- Check if rotation of model has changed?
- Three.js - Is it possible to store BoxGeometries or MeshLambertMaterial in an array
- Three.js r70 Merging Planes together only renders the first plane?
- Manually applying rotations and translations to Matrix4 in THREE.JS
- Loaded texture appears blurred, or like a single color. How to make the texture crisp and sharp
- Low framerate despite optimization in WebGL
- Update shape and save the new values in json
- Three.js - What is PlaneBufferGeometry
- RequireJS and THREE.js Orbit Controls
- three.js bloom is a blur?
- Meteorite smart package for entire library?
- Three JS Cylinder Texture Distortion