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

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:

No sphere!

Ideas?

Thanks!

  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.)

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!

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