CODEWITHSUNDEEP
three.js
D33Funky
D33Funky

Reputation: 45

three.js no object shown inside the container

I'm using the following code to start up learning three.js. This code is supposed to show a red sphere inside the black container but it does not for me. Is here anyone familiar with three.js to point out what is wrong with the code?

// Set the scene size.
const WIDTH = 400;
const HEIGHT = 300;

// Set some camera attributes.
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const FAR = 10000;

// Get the DOM element to attach to
const container =
    document.querySelector('#container');

// Create a WebGL renderer, camera
// and a scene
const renderer = new THREE.WebGLRenderer();
const camera =
    new THREE.PerspectiveCamera(
        VIEW_ANGLE,
        ASPECT,
        NEAR,
        FAR
    );

const scene = new THREE.Scene();

// Add the camera to the scene.
scene.add(camera);

// Start the renderer.
renderer.setSize(WIDTH, HEIGHT);

// Attach the renderer-supplied
// DOM element.
container.appendChild(renderer.domElement);

// Set up the sphere vars
const RADIUS = 50;
const SEGMENTS = 16;
const RINGS = 16;

// create the sphere's material
const sphereMaterial = 
  new THREE.MeshLambertMaterial(
    {
        color: 0xCC0000
    });

// Create a new mesh with
// sphere geometry
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(
    RADIUS,
    SEGMENTS,
    RINGS),
  sphereMaterial);

// Move the Sphere back in Z so we
// can see it.
sphere.position.z = -300;

// Finally, add the sphere to the scene.
scene.add(sphere);

Upvotes: 0

Views: 102

Answers (1)

prisoner849
prisoner849

Reputation: 17596

As you're using THREE.MeshLambertMaterial() you won't see the object with this material until you add a light source into the scene.

For example, THREE.DirectionalLight():

var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(100, 100, 100);
scene.add(dirLight);

jsfiddle example r86

Upvotes: 1

Related Questions