# Render a custom glb from blender

**URL:** <https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692>\
**Category:** Questions\
**Tags:** gltf-loader\
**Created:** [March 12, 2024, 10:04pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692 "2024-03-12T22:04:18Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![morty1](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@morty1](https://discourse.threejs.org/u/morty1)\
**Post date:** [March 12, 2024, 10:04pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/1 "2024-03-12T22:04:18Z")

</div>

Am I importing my .glb wrong? I finally figured out that I was typing GTLF instead of GLTF. 😛 I’ll go through this carefully tomorrow, for I have reached critical exhaustion after getting my shape all fixed up in blender. However, upon reading someone else’s post, I might be in big trouble.

I made a many sided dice with a number on each face. Then, I converted each face into its own object (so that maybe I could make the faces clickable using raycaster in three). But, I also converted the numbers into to a meshes because I had to in order to import the thing. (text objects aren’t meshes by default in blender) Someone else’s post says that I can only import ONE mesh? I have sooo many! Maybe I’m dead in the water.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/e/5ea4e2a07e214a3f8ca5c2eb433d9a73fcf18bac.png)

```javascript
import './style.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

//const loader = new GLTFLoader();
const canvas = document.querySelector('.webgl');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGL1Renderer({ 
  canvas: canvas
});

const sizes = {
  width:window.innerWidth,
  height:window.innerHeight,
}

//THIS IS WHERE YOU CAN CHANGE THE BACKGROUND COLOR IF YOU WANT
//scene.background = renderer.setClearColor(new THREE.Color("rgb(118, 165, 175)"));
 renderer.setSize(sizes.width, sizes.height);
 renderer.setClearColor(0x000000, 1.0);
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;

 document.body,appendChild(renderer.domElement);

camera.position.setX(5);
camera.position.setY(5);
camera.position.setZ(5);

camera.lookAt(0,0,0);

const ground = new THREE.PlaneGeometry (10,10);
const material = new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.DoubleSide});
const plane = new THREE.Mesh(ground,material);
scene.add(plane);

//This listens to dom events on the mouse and updates the screen accordingly
const controls = new OrbitControls(camera, renderer.domElement);

const loader = new GLTFLoader().setPath('dice_v2_seperateFaces_backup.glb');

loader.load( 'dice_v2_seperateFaces_backup.glb', function ( glb ) {

	scene.add( glb.scene );

}, undefined, function ( error ) {

	console.error( error );

} );

 const directionalLight = new THREE.DirectionalLight("rgb(255,204,204)", 0.5);
 scene.add(directionalLight);

 const hemiLight = new THREE.HemisphereLight("rgb(255,204,204)", 0.5);
 scene.add(hemiLight);

 const spotlight = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
 spotlight.position.set(0,10,0);
 scene.add(spotlight);

 const gridHelper = new THREE.GridHelper(200,50);
 scene.add(gridHelper);

// scene.add(myCustomShape);

function animate() {
  
  // myCustomShape.rotation.x += 0.01;
  // myCustomShape.rotation.y += 0.005;
  // myCustomShape.rotation.z += 0.01;

 // myCustomShape.computeVertexNormals();

  controls.update();

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 12, 2024, 10:08pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/2 "2024-03-12T22:08:07Z")

</div>

You are free to import as many meshes as you’d like - and the code looks ok. Does the model look alright when dropped in [gltf viewer](https://gltf-viewer.donmccurdy.com/) ?

(Also make sure that the model is loading at all - remove the .setPath part and check in devtools Network panel whether the file is correctly loaded.)

---

<div class="post-metadata">

**Author:** ![morty1](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@morty1](https://discourse.threejs.org/u/morty1)\
**Post date:** [March 13, 2024, 1:21pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/3 "2024-03-13T13:21:19Z")

</div>

It’s not rendering, but I will start over with a project that renders and try changing it line by line as needed. Thanks for the input! I’ll try that.

Well, it’s mostly alright. I think there’s some shape hidden inside it that I can’t see in blender or 3DViewer.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/0/c0f4331a2b089338c0b9a0acfbbac25a8e79dc0d.png)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/9/e9c4e13e8f3723e9a7d78cac217be876f2aed008.jpeg)

---

<div class="post-metadata">

**Author:** ![morty1](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@morty1](https://discourse.threejs.org/u/morty1)\
**Post date:** [March 13, 2024, 2:22pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/4 "2024-03-13T14:22:52Z")

</div>

This scene is fully functional and renders. Now, maybe I can add in the custom dice object.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/f/0fdf807978119dbc0eb29b10b23d55bff72c8cb8.png)

```javascript
//import './style.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#background_canvas'),
});

//scene.background = renderer.setClearColor(new THREE.Color("rgb(118, 165, 175)"));

//renderer.setClearColor(0xEEEEEE);
renderer.setClearColor(new THREE.Color("rgb(118, 165, 175)", 1.0));
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);
camera.position.setX(-3);

const cylinderGeometry = new THREE.CylinderGeometry(15, 15, 15, 7, 5, false);
//we changed from MeshBasicMaterial that does NOT require a lightsource to MeshStandardMaterial, that does.
const material = new THREE.MeshStandardMaterial({color: 0xffffff, wireframe: false});
const meshedSelector = new THREE.Mesh(cylinderGeometry, material);

// const ground = new THREE.PlaneGeometry (10,10);
// const material2 = new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.DoubleSide});
// const plane = new THREE.Mesh(ground,material2);
// plane.rotateX( - Math.PI / 2);
// scene.add(plane);

// var geo = new THREE.PlaneBufferGeometry(2000, 2000, 8, 8);
// var mat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide });
// var plane = new THREE.Mesh(geo, mat);
// plane.rotateX( - Math.PI / 2);
// scene.add(plane);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
const lightHelper1 = new THREE.DirectionalLightHelper(directionalLight);
directionalLight.position.set(25,25,25);
directionalLight.lookAt(0,0,0);
scene.add(directionalLight,lightHelper1);

//hemisphere light is functional
const hemiLight = new THREE.HemisphereLight("rgb(255,204,204)", 0.5);
const lightHelper2 = new THREE.HemisphereLightHelper(hemiLight);
hemiLight.position.set(35,25,10);
hemiLight.lookAt(0,0,0);
scene.add(hemiLight, lightHelper2);

//Spotlight is functional
const spotLight = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
spotLight.position.set(25,15,10);
spotLight.lookAt(0,0,0);
const lightHelper3 = new THREE.SpotLightHelper(spotLight);
scene.add(spotLight, lightHelper3);

const gridHelper = new THREE.GridHelper(200,50);
scene.add(gridHelper);

//This listens to dom events on the mouse and updates the screen accordingly
const controls = new OrbitControls(camera, renderer.domElement);

scene.add(meshedSelector);

function animate() {
  requestAnimationFrame(animate);

  meshedSelector.rotation.x += 0.01;
  meshedSelector.y += 0.005;
  meshedSelector.z += 0.01;

  cylinderGeometry.computeVertexNormals();

  controls.update();

  renderer.render(scene, camera);
}

animate();

```

---

<div class="post-metadata">

**Author:** ![morty1](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@morty1](https://discourse.threejs.org/u/morty1)\
**Post date:** [March 13, 2024, 2:28pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/5 "2024-03-13T14:28:03Z")

</div>

Next, I remove the polyhedron from the scene. Everything else still renders.  
**QUESTION:** Where the heck is that terrible green background color coming from?  
I see it. It is the setClearColor line.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/c/7cd7c5338b9ba1240b015149b53e4a35258b7629.png)

```javascript
//import './style.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#background_canvas'),
});

//scene.background = renderer.setClearColor(new THREE.Color("rgb(118, 165, 175)"));

//renderer.setClearColor(0xEEEEEE);
renderer.setClearColor(new THREE.Color("rgb(118, 165, 175)", 1.0));
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);
camera.position.setX(-3);

//const cylinderGeometry = new THREE.CylinderGeometry(15, 15, 15, 7, 5, false);
//we changed from MeshBasicMaterial that does NOT require a lightsource to MeshStandardMaterial, that does.
//const material = new THREE.MeshStandardMaterial({color: 0xffffff, wireframe: false});
//const meshedSelector = new THREE.Mesh(cylinderGeometry, material);

// const ground = new THREE.PlaneGeometry (10,10);
// const material2 = new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.DoubleSide});
// const plane = new THREE.Mesh(ground,material2);
// plane.rotateX( - Math.PI / 2);
// scene.add(plane);

// var geo = new THREE.PlaneBufferGeometry(2000, 2000, 8, 8);
// var mat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide });
// var plane = new THREE.Mesh(geo, mat);
// plane.rotateX( - Math.PI / 2);
// scene.add(plane);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
const lightHelper1 = new THREE.DirectionalLightHelper(directionalLight);
directionalLight.position.set(25,25,25);
directionalLight.lookAt(0,0,0);
scene.add(directionalLight,lightHelper1);

//hemisphere light is functional
const hemiLight = new THREE.HemisphereLight("rgb(255,204,204)", 0.5);
const lightHelper2 = new THREE.HemisphereLightHelper(hemiLight);
hemiLight.position.set(35,25,10);
hemiLight.lookAt(0,0,0);
scene.add(hemiLight, lightHelper2);

//Spotlight is functional
const spotLight = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
spotLight.position.set(25,15,10);
spotLight.lookAt(0,0,0);
const lightHelper3 = new THREE.SpotLightHelper(spotLight);
scene.add(spotLight, lightHelper3);

const gridHelper = new THREE.GridHelper(200,50);
scene.add(gridHelper);

//This listens to dom events on the mouse and updates the screen accordingly
const controls = new OrbitControls(camera, renderer.domElement);

//scene.add(meshedSelector);

function animate() {
  requestAnimationFrame(animate);

  // meshedSelector.rotation.x += 0.01;
  // meshedSelector.y += 0.005;
  // meshedSelector.z += 0.01;

  //cylinderGeometry.computeVertexNormals();

  controls.update();

  renderer.render(scene, camera);
}

animate();

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/5/b5aee7cc38ea710e9d9c9f550d9024480318af13.png)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 13, 2024, 2:46pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/6 "2024-03-13T14:46:02Z")

</div>

> [@morty1](#):
>
> Then, I converted each face into its own object (so that maybe I could make the faces clickable using raycaster in three).

It helps, but it is not compulsory.

> [@Select one unique faceIndex from many elements](https://discourse.threejs.org/t/select-one-unique-faceindex-from-many-elements/59523):
>
> Hi, I’ve to create unique faceIndex from many LineLoop/LineSegment. Currently I wrote code where I recived completly random faceIndex. I tryied to change camra setting but still I have wrong faceIndex. const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); // Setting the background color to white // Parameters for OrthographicCamera const frustumSize = 8; const aspect = window.innerWidth / window.innerHeight; const camera = new THREE.OrthographicCamera(frustu…

---

<div class="post-metadata">

**Author:** ![morty1](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@morty1](https://discourse.threejs.org/u/morty1)\
**Post date:** [March 13, 2024, 2:52pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/7 "2024-03-13T14:52:10Z")

</div>

> [@mjurczyk](#):
>
> devtools Network panel

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/b/fbec82d6741a610ccc40181cfbdb26e0e7f20b5b.png)

```javascript
//import './style.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#background_canvas'),
});

//scene.background = renderer.setClearColor(new THREE.Color("rgb(118, 165, 175)"));

//renderer.setClearColor(0xEEEEEE);
renderer.setClearColor(new THREE.Color("rgb(118, 165, 175)", 1.0));
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

camera.position.setZ(30);
camera.position.setX(-3);

const loader = new GLTFLoader().setPath('dice_v2_seperateFaces_backup.glb');

loader.load( 'dice_v2_seperateFaces_backup.glb', function ( glb ) {

 	scene.add( glb.scene );

 }, undefined, function ( error ) {

 	console.error( error );

 } );

//const cylinderGeometry = new THREE.CylinderGeometry(15, 15, 15, 7, 5, false);
//we changed from MeshBasicMaterial that does NOT require a lightsource to MeshStandardMaterial, that does.
//const material = new THREE.MeshStandardMaterial({color: 0xffffff, wireframe: false});
//const meshedSelector = new THREE.Mesh(cylinderGeometry, material);

// const ground = new THREE.PlaneGeometry (10,10);
// const material2 = new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.DoubleSide});
// const plane = new THREE.Mesh(ground,material2);
// plane.rotateX( - Math.PI / 2);
// scene.add(plane);

// var geo = new THREE.PlaneBufferGeometry(2000, 2000, 8, 8);
// var mat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide });
// var plane = new THREE.Mesh(geo, mat);
// plane.rotateX( - Math.PI / 2);
// scene.add(plane);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
const lightHelper1 = new THREE.DirectionalLightHelper(directionalLight);
directionalLight.position.set(25,25,25);
directionalLight.lookAt(0,0,0);
scene.add(directionalLight,lightHelper1);

//hemisphere light is functional
const hemiLight = new THREE.HemisphereLight("rgb(255,204,204)", 0.5);
const lightHelper2 = new THREE.HemisphereLightHelper(hemiLight);
hemiLight.position.set(35,25,10);
hemiLight.lookAt(0,0,0);
scene.add(hemiLight, lightHelper2);

//Spotlight is functional
const spotLight = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
spotLight.position.set(25,15,10);
spotLight.lookAt(0,0,0);
const lightHelper3 = new THREE.SpotLightHelper(spotLight);
scene.add(spotLight, lightHelper3);

const gridHelper = new THREE.GridHelper(200,50);
scene.add(gridHelper);

//This listens to dom events on the mouse and updates the screen accordingly
const controls = new OrbitControls(camera, renderer.domElement);

//scene.add(meshedSelector);

function animate() {
  requestAnimationFrame(animate);

  // meshedSelector.rotation.x += 0.01;
  // meshedSelector.y += 0.005;
  // meshedSelector.z += 0.01;

  //cylinderGeometry.computeVertexNormals();

  controls.update();

  renderer.render(scene, camera);
}

animate();

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/1/71376b73c02edc7d2f5fee99d9243550a660bb05.png)

Ok. So, I get an error when I uncomment my loader. Let me think about this…

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 13, 2024, 2:53pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/8 "2024-03-13T14:53:23Z")

</div>

This error means the path to the model is incorrect.

---

<div class="post-metadata">

**Author:** ![morty1](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@morty1](https://discourse.threejs.org/u/morty1)\
**Post date:** [March 13, 2024, 3:14pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/9 "2024-03-13T15:14:40Z")

</div>

You are my hero, mjurczyk!!!

It’s alive!!

[![](https://img.youtube.com/vi/QuoKNZjr8_U/hqdefault.jpg "Frankenstein "It's Alive" Scene") ](https://www.youtube.com/watch?v=QuoKNZjr8_U)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/3/83ab662c413a13c2f056b5c8df0b283d63933fa7.png)

---

<div class="post-metadata">

**Author:** ![morty1](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@morty1](https://discourse.threejs.org/u/morty1)\
**Post date:** [March 13, 2024, 6:30pm UTC](https://discourse.threejs.org/t/render-a-custom-glb-from-blender/62692/10 "2024-03-13T18:30:20Z")

</div>

Oh my gosh! It’s so beautiful. I got rid of the green and added lights and spinning. Its wonderful! Thank you all so much for your help.

Now, to add clickability…

```javascript
//import './style.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#background_canvas'),
});

THREE.ColorManagement.enabled = true;
//renderer.setClearColor(color, opacity);

renderer.setClearColor(new THREE.Color("rgb(100, 100, 100)"), 0.2);
//renderer.setClearColor(new THREE.Color("rgb(118, 165, 175)", 1.0));
//renderer.setClearColorHex( 0xffffff, 1 );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

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

//The X axis is red. The Y axis is green. The Z axis is blue.
camera.position.setX(3);
camera.position.setY(3);
camera.position.setZ(-2);

//const loader = new GLTFLoader();
//Absolute Path C:\Users\HP\Desktop\apps-threeJSImport\vite-project\dice_v2_seperateFaces_backup.glb
//Relative Path of custom object vite-project/dice_v2_seperateFaces_backup.glb
// Relative path of main.JS vite-project/main.js

//loader.load( './dice_v2_seperateFaces_backup.glb', function ( glb ) {
  //const loader = new GLTFLoader().setPath('dice_v2_seperateFaces_backup.glb');
const loader = new GLTFLoader();

let loadedModel;
//vite-project\Dice
//
//vite-project\main.js
//C:\Users\HP\Desktop\apps-threeJSImport_backup\vite-project\main.js
loader.load( './dice_v2_seperateFaces_backup.glb', function ( glb ) {
  
    loadedModel = glb;
    glb.castShadow = true;
   	scene.add( glb.scene );
    

     glb.scene.traverse(obj => {
      if (obj.isMesh) {
        console.log(obj.geometry);
        console.log(obj.name);
        console.log(obj.id);
        console.log("----------------");
      }
   });
  
   }, undefined, function ( error ) {
  
   	console.error( error );
  
   } );

//const cylinderGeometry = new THREE.CylinderGeometry(15, 15, 15, 7, 5, false);
//we changed from MeshBasicMaterial that does NOT require a lightsource to MeshStandardMaterial, that does.
//const material = new THREE.MeshStandardMaterial({color: 0xffffff, wireframe: false});
//const meshedSelector = new THREE.Mesh(cylinderGeometry, material);

// const ground = new THREE.PlaneGeometry (10,10);
// const material2 = new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.DoubleSide});
// const plane = new THREE.Mesh(ground,material2);
// plane.rotateX( - Math.PI / 2);
// scene.add(plane);

//You have used MeshBasicMaterial for your plane mesh which is a unlit material. So it does not receive shadows. 
//Using a lit material like MeshStandardMaterial solves the issue.

const boxGeometry = new THREE.BoxGeometry(10,0.2,10);
const boxMaterial = new THREE.MeshStandardMaterial({color: 0x000082});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, -4, 0);
box.receiveShadow = true
scene.add(box);

// const planeGeometry = new THREE.PlaneGeometry(30,30);
// const planeMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff});
// const plane = new THREE.Mesh(planeGeometry, planeMaterial);
// plane.position.set(25,15,10);
// scene.add(plane);

// var geo = new THREE.PlaneBufferGeometry(2000, 2000, 8, 8);
// var mat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide });
// var plane = new THREE.Mesh(geo, mat);
// plane.rotateX( - Math.PI / 2);
// scene.add(plane);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
//const lightHelper1 = new THREE.DirectionalLightHelper(directionalLight);
directionalLight.position.set(25,25,25);
directionalLight.lookAt(0,0,0);
directionalLight.castShadow = true;
//scene.add(directionalLight,lightHelper1);
scene.add(directionalLight);

//hemisphere light is functional - this one has rose colored light like in the eavening
// It makes the metallic polyhedron have a rosy hue - more of a brown.
const hemiLight = new THREE.HemisphereLight("rgb(255,204,204)", 0.5);
//const lightHelper2 = new THREE.HemisphereLightHelper(hemiLight);
hemiLight.position.set(35,25,10);
hemiLight.castShadow = true;
hemiLight.lookAt(0,0,0);
//scene.add(hemiLight, lightHelper2);
scene.add(hemiLight);

// //hemisphere light is functional - this one has white light
// const hemiLight = new THREE.HemisphereLight(0xffffff, 0.5);
// //const lightHelper2 = new THREE.HemisphereLightHelper(hemiLight);
// hemiLight.position.set(35,25,10);
// hemiLight.lookAt(0,0,0);
// //scene.add(hemiLight, lightHelper2);
// scene.add(hemiLight);

//Spotlight is functional
const spotLight = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
spotLight.position.set(25,15,10);
spotLight.lookAt(0,0,0);
spotLight.castShadow = true;
//const lightHelper3 = new THREE.SpotLightHelper(spotLight);
//scene.add(spotLight, lightHelper3);
scene.add(spotLight);

//Spotlight is functional
const spotLightOnFace1 = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
spotLightOnFace1.position.set(-5,-5,-5);
spotLightOnFace1.castShadow = true;
spotLightOnFace1.lookAt(0,0,0);
//const lightHelper4 = new THREE.SpotLightHelper(spotLightOnFace1);
//scene.add(spotLightOnFace1, lightHelper4);
scene.add(spotLight);

//Spotlight is functional
const spotLight2 = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
spotLight2.position.set(2,5,2);
spotLight2.castShadow = true;
spotLight2.lookAt(0,0,0);
spotLight2.castShadow = true;
//const lightHelper4 = new THREE.SpotLightHelper(spotLightOnFace1);
//scene.add(spotLightOnFace1, lightHelper4);
scene.add(spotLight2);

const pointLight_face1 = new THREE.PointLight( 0x0000ff, 1, 100);
pointLight_face1.position.set(0,-1, -1);
pointLight_face1.lookAt(0,0,0);
//const lightHelper5 = new THREE.PointLightHelper(pointLight_face1);
//scene.add(pointLight_face1, lightHelper5);
scene.add(pointLight_face1);

const pointLight_face9 = new THREE.PointLight( 0x0000ff, 1, 100);
pointLight_face9.position.set(0,1,1);
pointLight_face9.lookAt(0,0,0);
//const lightHelper6 = new THREE.PointLightHelper(pointLight_face9);
//scene.add(pointLight_face9, lightHelper6);
scene.add(pointLight_face9);

//THIS IS THE BIG 2D Mesh (grid) that shows you space.
//const gridHelper = new THREE.GridHelper(200,50);
//scene.add(gridHelper);

//This listens to dom events on the mouse and updates the screen accordingly
const controls = new OrbitControls(camera, renderer.domElement);

//scene.add(meshedSelector);

function animate() {
  requestAnimationFrame(animate);

  // https://www.youtube.com/watch?v=WBe3xrV4CPM
  if(loadedModel){
      var isophereMesh = loadedModel.geometry;
      console.log("isosphere is mesh?" + isophereMesh);
      //isophere.rotation.x += 0.01;

      loadedModel.scene.rotation.x += 0.01;
      loadedModel.scene.rotation.y += 0.005;
      //loadedModel.scene.roation.z += 0.01;

  }

  // meshedSelector.rotation.x += 0.01;
  // meshedSelector.y += 0.005;
  // meshedSelector.z += 0.01;

  //https://stackoverflow.com/questions/47589370/three-js-unable-to-access-imported-object-property-outside-loader-load
  //parent.position.x = ....
  
  //parent.getObjectById(27).rotation.x += 0.01;
  //cylinderGeometry.computeVertexNormals();
 // var myCustomObject = parent.getObjectByID(28);
 //var myCustomObject = getObjectByID(28);

  controls.update();

  renderer.render(scene, camera);
}

animate();

```