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.
GitHub: fluuuid/labs
![fluuuid profile picture](/fluuuid.png?size=40)
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);
GitHub: mattdesl/filmic-gl
![mattdesl profile picture](/mattdesl.png?size=40)
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.
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
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.
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();
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
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)
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
GitHub: vidartf/ipyvolume
![vidartf profile picture](/vidartf.png?size=40)
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++) {
+ 3 other calls in file
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, });
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
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
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
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)
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
GitHub: utunga/deeppbr.ai
![utunga profile picture](/utunga.png?size=40)
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
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; }
GitHub: avocadojesus/hackaholics
![avocadojesus profile picture](/avocadojesus.png?size=40)
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;
GitHub: Suixinlei/vrjs
![Suixinlei profile picture](/Suixinlei.png?size=40)
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);
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
three.Vector3 is the most popular function in three (22341 examples)