Error in render.renderer with adding Directional Light

Questions
,
1

Hi all. Here is my code:

function addLights() {
	var ambiColor = "#ffffff";
	var ambientLight = new THREE.AmbientLight(ambiColor, 0.5);
	ambientLight.wrapAround = true;
	scene.add(ambientLight);
    var directionalLightColor = new THREE.Color(0xffffff);
	var directionalLight = new THREE.DirectionalLight(directionalLightColor);
	directionalLight.position.set(300, 80, -2000);
	directionalLight.castShadow = true;
	directionalLight.shadow.camera.near = 0.5;
	directionalLight.shadow.camera.far = 1300;
	directionalLight.shadow.camera.left = -600;
	directionalLight.shadow.camera.right = 600;
	directionalLight.shadow.camera.top = 600;
	directionalLight.shadow.camera.bottom = -600;

	directionalLight.distance = 10;
	directionalLight.intensity = 14.0;
	directionalLight.shadow.mapSize.height = 1024;
	directionalLight.shadow.mapSize.width = 1024;
	//camera.add(directionalLight);
};

	function init() {

	createScene();
	createRenderer();
	addAureole();
	addEarthTexture();
	addEarthContour();
	addEarthPoints();
	addClouds();
	addConnector();
	addWire();
	addLights();

};
function animate() {
	requestAnimationFrame(animate);
	Render();
};
function Render() {
	renderer.autoClear = false;
	renderer.clear();
	renderer.render(backgroundScene , backgroundCamera );
	renderer.render(scene, camera);
};

function onResize() {
	renderer.setSize(window.innerWidth, window.innerHeight);
	camera.aspect = (window.innerWidth / window.innerHeight);
	camera.updateProjectionMatrix();
};

window.addEventListener('resize', onResize, false);

If i add:

camera.add(directionalLight);

0.5s i have fine working page with adequately working directional light, and after that I get error:

Uncaught TypeError: Cannot read property 'direction' of undefined

in render.renderer at

function Render() {...renderer.render(scene, camera);}

And all work fine withot directional light. Can anyone tell what went wrong?

3

I’ve created a fiddle with parts of your code: https://jsfiddle.net/f2Lommf5/11391/

I was not able to reproduce the issue.

BTW: You set some light properties which do not exist. I’ve marked the respective statements in the fiddle.

4

I’ve tried with your properties. May be problem is in objLoader and light? Here is working example for inspection:

site with error

Here is code of addWire function:

	function addWire() {

	let coords = [
		{
			lat: 18,	long: 24//
		},
		{
			lat: -8,	long: -3//
		},
		{
			lat: -15,	long:-101//
		},
		{
			lat: 50,	long: 18//
		},
		{
			lat: 35,	long: -105//
		},
		{
			lat: 73,	long: -102
		}
	];
	coords.forEach(function(item, i, coords) {

		var mtlLoader = new MTLLoader();
		mtlLoader.load('1.mtl', function (materials) {
			materials.flatShading = true;
			//
			console.log(materials);
			materials.preload();
			var objLoader = new THREE.OBJLoader();
			objLoader.setMaterials(materials);
			objLoader.load('1.obj', function (object) {		
					
				group.add(object);
				console.log(object);
				object.translate(0, 0, 0.25 + 595);
				var startVector = new THREE.Vector3(0, 0, 0);
				var endVector = new THREE.Vector3(xrad,  yrad,  zrad);

				var phi   = (90-item.lat)*(Math.PI/180);
				var theta = (item.long-180)*(Math.PI/180);
				let xrad = -((595) * Math.sin(phi)*Math.cos(theta));
				let zrad = ((595) * Math.sin(phi)*Math.sin(theta));
				let yrad = ((595) * Math.cos(phi));
				if ((item.lat < 0)&(item.lat > -45)&(item.long < 0)&(item.long > -45)){
					var xrot = new THREE.Matrix4().makeRotationX( (180)*(Math.PI/180) - (90-item.lat)*(Math.PI/180) );
					var yrot = new THREE.Matrix4().makeRotationY( (270)*(Math.PI/180) - (item.long-180)*(Math.PI/180) );
					var xyrot = xrot.multiply(yrot);
					var zrot = new THREE.Matrix4().makeRotationZ( 0 );
					var xyzrot = xyrot.multiply(zrot);

					object.applyMatrix(	xyzrot );
				};
				if ((item.lat < 0)&(item.lat > -45)&(item.long < -90)&(item.long > -135)){
					var xrot = new THREE.Matrix4().makeRotationX( (180)*(Math.PI/180) - (90-item.lat)*(Math.PI/180) );
					var yrot = new THREE.Matrix4().makeRotationY( (270)*(Math.PI/180) - (item.long-180)*(Math.PI/180) );
					var xyrot = xrot.multiply(yrot);
					var zrot = new THREE.Matrix4().makeRotationZ( 0 );
					var xyzrot = xyrot.multiply(zrot);

					object.applyMatrix(	xyzrot );
				};
				if ((item.lat > 0)&(item.lat < 45)&(item.long < -90)&(item.long > -135)){
					var xrot = new THREE.Matrix4().makeRotationX( (180)*(Math.PI/180) - (90-item.lat)*(Math.PI/180) );
					var yrot = new THREE.Matrix4().makeRotationY( (270)*(Math.PI/180) - (item.long-180)*(Math.PI/180) );
					var xyrot = xrot.multiply(yrot);
					var zrot = new THREE.Matrix4().makeRotationZ( 0 );
					var xyzrot = xyrot.multiply(zrot);

					object.applyMatrix(	xyzrot );
				};
				if ((item.lat > 45)&(item.lat < 90)&(item.long < -90)&(item.long > -135)){
					var xrot = new THREE.Matrix4().makeRotationX( (180)*(Math.PI/180) - (90-item.lat)*(Math.PI/180) );
					var yrot = new THREE.Matrix4().makeRotationY( (264)*(Math.PI/180) - (item.long-180)*(Math.PI/180) );
					var xyrot = xrot.multiply(yrot);
					var zrot = new THREE.Matrix4().makeRotationZ( 0 );
					var xyzrot = xyrot.multiply(zrot);

					object.applyMatrix(	xyzrot );
				};
				if ((item.lat > 0)&(item.lat < 45)&(item.long > 0)){
					var xrot = new THREE.Matrix4().makeRotationX( (300)*(Math.PI/180) - (90-item.lat)*(Math.PI/180) );
					var yrot = new THREE.Matrix4().makeRotationY( (-35)*(Math.PI/180) - (item.long-180)*(Math.PI/180) );
					var xyrot = xrot.multiply(yrot);
					var zrot = new THREE.Matrix4().makeRotationZ( 0 );
					var xyzrot = xyrot.multiply(zrot);

					object.applyMatrix(	xyzrot );
				};
				if ((item.lat > 45)&(item.lat < 90)&(item.long > 0)){
					var xrot = new THREE.Matrix4().makeRotationX( (-25)*(Math.PI/180) + (90-item.lat)*(Math.PI/180) );
					var yrot = new THREE.Matrix4().makeRotationY( (-160)*(Math.PI/180) + (item.long-180)*(Math.PI/180) );
					var xyrot = xrot.multiply(yrot);
					var zrot = new THREE.Matrix4().makeRotationZ( 0 );
					var xyzrot = xyrot.multiply(zrot);

					object.applyMatrix(	xyzrot );
				};
				object.position.set(xrad, zrad, yrad);
				object.receiveShadow = true;
				object.scale.multiplyScalar(0.25);
				//object.getObjectByName( "Line012" ).material = new THREE.MeshPhongMaterial({
				//	color: 0x000000,
				//	shininess: 100,
				//	lights: true
				//});
				//object.lights =  true;

				object.traverse (function (child) {
				        if (child instanceof THREE.Mesh) {
				          child.material.emissive.setHex( 0x00ff00 );
				          child.material.specular.setHex( 0xff0000 );
				          child.material.lights=true;
				          child.material.shininess=300;
				        }
				     });		

			});

		});

	});

};

addConnectore is same. And start part of init:

	var THREE = require('three')
var OBJLoader = require('three-obj-loader');
var MTLLoader = require('three-mtl-loader');
OBJLoader(THREE);
MTLLoader(THREE);

//VARIABLES

let canvas = document.getElementById('basicScene');
let width = window.innerWidth;
let height = window.innerHeight;
var fov = 75;
var near = 0.1;
var far = 20000;
var pos_x = 0;
var pos_y = 0;
var pos_z = 1800;
var color = 0x000000;
var mouse = new THREE.Vector2(), INTERSECTED;

var camera, scene, renderer, backgroundScene, backgroundCamera, group, controls, earth_texture, target;
init();
animate();

//CREATE_SCENE

function createScene() {

	scene = new THREE.Scene();
	scene.fog = new THREE.FogExp2( 0x000104, 0.0000675 );

	group = new THREE.Object3D();	

	camera = new THREE.PerspectiveCamera( fov, width / height, near, far );
	camera.position.set( pos_x, pos_y, pos_z );

	let backgroundSceneMap = new THREE.TextureLoader().load( 'background_map.jpg' );
	var backgroundSceneMesh = new THREE.Mesh( new THREE.PlaneGeometry(2, 2, 0),	new THREE.MeshBasicMaterial( { map: backgroundSceneMap } ) );

	backgroundSceneMesh.material.depthTest = false;
	backgroundSceneMesh.material.depthWrite = false;

	backgroundScene = new THREE.Scene();
	backgroundCamera = new THREE.Camera();

	backgroundScene.add(backgroundCamera);
	backgroundScene.add(backgroundSceneMesh);

	scene.add(group);
	scene.add(camera);

};

function createRenderer() {

	renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );

	renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
	renderer.setSize(width, height);
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;

	controls = new OrbitControls(camera, renderer.domElement);

};
5

Thanks for the live example! Any chances to provide unminimized JS files? Otherwise debugging will be hard^^.

6

I’ve wrote all in vue nuxt, so I’m sorry).

page.vue with all three.js code

Or I can upload all project, It you need.

7

I’ve checked your posted code in this topic but I could not find a problem.

Maybe on thing: You might want to create your background via scene.background instead of creating a custom solution. The error is maybe related to this code.

Check out if this works for you:

scene.background = new THREE.TextureLoader().load( 'background_map.jpg' );
8

Hmm, same error. In 0.5s appear planet with right lighted wires and all disappear

9

I’ve found a problem. Disabled:

					object.getObjectByName( "Cylinder030" ).material = new THREE.MeshPhongMaterial({
					color: 0x000000,
					shininess: 100,
					lights: false  //deleted this
				});

and moved an array out from functions addWire() and addConnector();

10

Um, lights is not a property that should be changed by users for materials like MeshPhongMaterial or MeshStandardMaterial . Something else in your code causes the problem.