Home

Index

How to use the SphereGeometry function from three

Find comprehensive JavaScript three.SphereGeometry code examples handpicked from public code repositorys.

three.SphereGeometry is a class in the Three.js library that represents a spherical geometry with a given radius, number of segments, and number of rings.

Globe.js

29
30
31
32
33
34
35
36
37
//         '}'
//       ].join('\n')
//     }
// };

var geometry = new THREE.SphereGeometry(200, 40, 40);

// shader = this.shaders['earth'];
// uniforms = THREE.UniformsUtils.clone(shader.uniforms);

163

main.js

GitHub: mattdesl/filmic-gl

59
60
61
62
63
64
65
66
67
68

var refractionCube = new THREE.Texture( reflectionCube.image, new THREE.CubeRefractionMapping() );
refractionCube.format = THREE.RGBFormat;

var r = 10;
var sphereGeo = new THREE.SphereGeometry(r, 50, 50);
var colors = [
    0x9e735f,
    0xFFFFFF,
    0x5babc2

How does three.SphereGeometry work?

three.SphereGeometry is a class in the Three.js library that represents a spherical geometry with a given radius, number of segments, and number of rings. When you create a new SphereGeometry object, you specify the radius of the sphere, as well as the number of horizontal segments and vertical rings to use in constructing the geometry. The SphereGeometry object then generates a set of vertices and faces to represent the geometry. The number of segments and rings determine the level of detail of the geometry. More segments and rings will result in a smoother, more detailed sphere, while fewer segments and rings will result in a more faceted, less detailed sphere. SphereGeometry objects also have a variety of methods for working with the geometry, such as translate(), rotateX(), rotateY(), and rotateZ(), which modify the position and orientation of the sphere. Overall, three.SphereGeometry provides a convenient way to create and manipulate spherical geometries in Three.js, allowing for the creation of 3D scenes and visualizations.

index.js

GitHub: ASSERT-KTH/ci-hackathon

214
215
216
217
218
219
220
221
222
223

function addLigth(color, position){
    
    group = new THREE.Group();

    var bulbGeometry = new THREE.SphereGeometry(1, boxSize[1]/4, boxSize[1]/4);
    var spotLight = new THREE.SpotLight(Number(color));
    var bulbLight = new THREE.PointLight(Number(color), 0.1);
    
    bulbLight.power = 0.25;

+ 2 other calls in file

index.js

GitHub: shrekshao/ParticleProjector

181
182
183
184
185
186
187
188
189
190
// var sphere = new THREE.Mesh( sphereBufferGeometry, material );



// // sphere geometry
// var sphereGeometry = new THREE.SphereGeometry(5, 10, 10);

// // point cloud of models
// var particleCount = 1000;
// var points = THREE.GeometryUtils.randomPointsInGeometry( sphereGeometry, particleCount );

+ 2 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

In this example, we create a SphereGeometry object with a radius of 1, 32 horizontal segments, and 32 vertical rings, using new THREE.SphereGeometry(1, 32, 32). We then create a MeshBasicMaterial object with a white color and use it to create a Mesh object by passing the geometry and material objects to new THREE.Mesh(). We add the Mesh object to the scene using scene.add(sphere), and position the camera to look at the sphere from a distance using camera.position.z = 5. We then define an animate() function that rotates the sphere around the x and y axes using sphere.rotation.x and sphere.rotation.y, and renders the scene using renderer.render(scene, camera). Finally, we call requestAnimationFrame() to animate the sphere, and render the scene using renderer.render(scene, camera). By using three.SphereGeometry to create a Mesh object representing a sphere, and then manipulating its position and orientation, we can create a simple 3D visualization in Three.js.

main.js

GitHub: CIS700-Procedural-Graphics/Project6-RayMarching-Implicit-Surfaces

6
7
8
9
10
11
12
13
14
15
import Stats from 'stats-js'
import ProxyGeometry, {ProxyMaterial} from './proxy_geometry'
import RayMarcher from './rayMarching'

var BoxGeometry = new THREE.BoxGeometry(1, 1, 1);
var SphereGeometry = new THREE.SphereGeometry(1, 32, 32);
var ConeGeometry = new THREE.ConeGeometry(1, 1);

window.addEventListener('load', function() {
    var stats = new Stats();

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

466
467
468
469
470
471
472
473
474
475

  // generates sphere mesh
generateSphere(node) {
  const sphereMaterial = this.three_materials[node.type];
  const r1 = node.radius || 0.01;
  const geometry = new THREE.SphereGeometry(r1);
  const mesh = new THREE.Mesh(geometry, sphereMaterial);
  mesh.position.x = node.x;
  mesh.position.y = node.y;
  mesh.position.z = node.z;

+ 3 other calls in file

streetview.js

GitHub: Jam3/threejs-cubemap-compositor

29
30
31
32
33
34
35
36
37
38
texture.needsUpdate = true
texture.image = canvas

// add a double-sided sphere
var cubeTex = new THREE.CubeTexture()
var geo = new THREE.SphereGeometry(1, 84, 84)
var mat = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide,
})
var sphere = new THREE.Mesh(geo, mat)

LiquidFunRenderer.js

GitHub: pRizz/iota-fountain

169
170
171
172
173
174
175
176
177
178
if (!!process.env.VUE_APP_BANANO_FOUNTAIN) {
  return createBananoParticleMesh()
}

const coreSphereMesh = new THREE.Mesh(
  new THREE.SphereGeometry(0.008),
  new THREE.MeshBasicMaterial({color: 0xf8f8f8}))

const parentSphereMesh = new THREE.Mesh(new THREE.SphereGeometry(glowingSphereRadius), new THREE.MeshBasicMaterial({
  transparent: true,

+ 3 other calls in file

scatter.js

GitHub: vidartf/ipyvolume

17
18
19
20
21
22
23
24
25
26
this.textures = null;
if(this.model.get('texture')) {
    this._load_textures()
}

this.geo_diamond = new THREE.SphereGeometry(1, 2, 2)
this.geo_sphere = new THREE.SphereGeometry(1, 12, 12)
this.geo_box = new THREE.BoxGeometry(1, 1, 1)
this.geo_cat = new THREE.Geometry()
for(var i = 0; i < cat_data.vertices.length; i++) {

236

+ 3 other calls in file

Editor.js

GitHub: BaurTokenov/three-js-editor-2

269
270
271
272
273
274
275
276
277
278
        this.signals.cameraRemoved.dispatch(camera);
    }
},
//
addHelper: (function () {
    var geometry = new THREE.SphereGeometry(2, 4, 2);
    var material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        visible: false,
    });

voxel_smoothing_tool.js

GitHub: shark39/metamaterials

10
11
12
13
14
15
16
17
18
19
function VoxelSmoothingTool(renderer, voxelGrid) {
  bind(this);
  VoxelTool.call(this, renderer, voxelGrid);

  // changing coursor to be a sphere.
  //this.cursor new THREE.SphereGeometry( 0.4, 64, 64 );
  //this.cursor.geometry = newGeom;
  //this.cursor.geometry.needsUpdate = true;
  // changes colors based on dimension. 3 stands for this mode.
  //this.cursor.material.uniforms.tool.value = 3;

+ 45 other calls in file

voxel_grid.js

GitHub: shark39/metamaterials

22
23
24
25
26
27
28
29
30
31
this.minThickness = 0.01;

this.textureGeometry = new THREE.Geometry();

this.intersectionVoxelGeometry = new THREE.BoxGeometry(1.0, 1.0, 1.0);
this.anchorGeometry = new THREE.SphereGeometry(0.35, 0.35, 0.35);
this.anchorMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });

this.anchorParent = new THREE.Object3D();
this.anchorParent.visible = false;

+ 9 other calls in file

browser.js

GitHub: FabricLabs/verse

55
56
57
58
59
60
61
62
63
64
const vehicleGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const vehicleMaterial = new THREE.MeshBasicMaterial({ color: 0x2185d0 });
const vehicleGlow = new THREE.PointLight(0x5555ee, 1, 50);

// Fireballs
const fireballGeometry = new THREE.SphereGeometry(0.05, 8, 8);
const fireballMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000 });

// Ghost
const ghostMaterial = new THREE.MeshBasicMaterial({

+ 35 other calls in file

OLS3D.react.js

GitHub: kevinmcalear/explained-visually

136
137
138
139
140
141
142
143
144
145
this._setupGridLabels(state)

state.objects.pointGroup = new THREE.Object3D()
state.scene.add(state.objects.pointGroup)

state.geometries.point = new THREE.SphereGeometry(props.pointSize, 32, 32)

this._setupRegressionPlane(state)
this._setupErrorLines(state)
this._setupErrorSquares(state)

_web3d.js

GitHub: truongvithien/threed

259
260
261
262
263
264
265
266
267
268
}
var settings = $.extend(defaults, options);

if (settings.environment_light.enable) web3d.setupRGBE(settings.environment_light.options);

var sphere_light = new THREE.SphereGeometry(0.2, 32, 32);

if (settings.key_light.enable) {
    light_key = new THREE.PointLight(
        settings.key_light.options.color,

+ 5 other calls in file

webgl_main.js

GitHub: utunga/deeppbr.ai

198
199
200
201
202
203
204
205
206
207
group.rotation.y = 0 ; - Math.PI / 2;
group.rotation.x = Math.PI / 2; 

group.castShadow = true;

var geometry2 = new THREE.SphereGeometry(50, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material2 = new THREE.MeshPhongMaterial( {color: 0x444444, side: THREE.BackSide});
var sphere = new THREE.Mesh(geometry2, material2);
//sphere.receiveShadow = true
sphere.castShadow = true

+ 7 other calls in file

IKRobot.js

GitHub: jsdf/robot-control

66
67
68
69
70
71
72
73
74
75
function makeSphere(
  radius: number,
  color: number | string,
  wireframe: boolean = false
) {
  const geometry = new THREE.SphereGeometry(radius, 5, 5);
  const material = new THREE.MeshBasicMaterial({color, wireframe});
  const sphere = new THREE.Mesh(geometry, material);
  return sphere;
}

game.js

GitHub: avocadojesus/hackaholics

68
69
70
71
72
73
74
75
76
77
  normalScale: new THREE.Vector2( 0.85, 0.85 )
});

// planet

geometry = new THREE.SphereGeometry( radius, 100, 50 );

meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
meshPlanet.rotation.y = 0;
meshPlanet.rotation.z = tilt;

world.js

GitHub: Suixinlei/vrjs

52
53
54
55
56
57
58
59
60
61
    container.appendChild( stats.domElement );
  }
}

World.prototype.addMesh  = function () {
  let Earth_Geometry = new THREE.SphereGeometry( 6371, 100, 50 );
  let Earth_Material = new THREE.MeshBasicMaterial({
    color: '#ffffff'
  });
  Earth = new THREE.Mesh(Earth_Geometry, Earth_Material);

splinesManager.js

GitHub: mlknz/three-splineCurveHelper2d

0
1
2
3
4
5
6
7
8
9
const THREE = require('three');

const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const selectedLineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });

const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
const sphereMaterial = new THREE.MeshBasicMaterial({color: 0xaaccaa});

class SplinesManager {
    constructor(scene) {

+ 3 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About