Beginner, can make a cube, a cone, but not a sphere

Questions
1

Hello, World!

It’s my very first time playing with Three.js, so please excuse my probably naive question but, I can’t seem to make SphereGeometry work for some reason. Here’s my very simple scene which adds a box, a sphere and a cone. I can see the box and the cone but not the sphere. I’ve tried to fiddle with the parameters, to no avail.

Here’s the source:

import * as THREE from 'https://unpkg.com/three/build/three.module.js';
import { VRButton } from 'https://unpkg.com/three/examples/jsm/webxr/VRButton.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x505050 );

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.xr.enabled = true;
renderer.xr.setReferenceSpaceType( 'local-floor' );

document.body.appendChild( renderer.domElement );


scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );


const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 ).normalize();
scene.add( light );


const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );


const boxGeometry = new THREE.BoxGeometry( .5, .5, .5);
const boxMaterial = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
const box = new THREE.Mesh( boxGeometry, boxMaterial );
box.position.x = -1;
box.position.y = box.geometry.parameters.height / 2;
box.position.z = -2;
scene.add( box );

const sphereGeometry = new THREE.SphereGeometry( .25 );
const sphereMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.position.x = 0;
sphere.position.y = sphere.geometry.parameters.height / 2;
sphere.position.z = -2;
scene.add( sphere );

const coneGeometry = new THREE.ConeGeometry( .25, .5);
const coneMaterial = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
const cone = new THREE.Mesh( coneGeometry, coneMaterial );
cone.position.x = 1;
cone.position.y = cone.geometry.parameters.height / 2;
cone.position.z = -2;
scene.add( cone );



camera.position.y = 1.75;
camera.position.z = 1;


document.body.appendChild( VRButton.createButton( renderer ) );



renderer.setAnimationLoop( function () {

    renderer.render( scene, camera );


} );

(full source here: https://jraf.org/static/tmp/three/no-sphere.html)

Here’s the result:

Screen Shot 2020-12-05 at 22.50.28
Screen Shot 2020-12-05 at 22.50.281798×1216 72 KB

No sphere!

Ideas?

Thanks!

2
  1. For each case - it’s usually better to use <shape>BufferGeometry instead of <shape>Geometry (ie. BoxBufferGeometry instead of BoxGeometry, usage the same, effects better.)
sphere.position.y = sphere.geometry.parameters.height / 2;
  1. You’re probably setting sphere’s position to an undefined value. Box geometry has height property defined, but for sphere you’d probably need to use radius instead (source.)
3

Thank you very much! That makes of course sense, I knew it had to be a stupid mistake :stuck_out_tongue:
Thanks also for the tip about BoxBufferGeometry.
Cheers!

4

Nothing to apologize for. :slightly_smiling_face:

If you are new, you may find the collection interesting.

The links to the posts are in the source code.

1 Like