I am a beginner in the world of WebGL and Three.js, so forgive me if this is a basic question that has been asked before.
Recently, I've been experimenting with my code to create a mini solar system.
I utilized SpotLight with SpotLightHelper, as well as PointLight and PointLightHelper. I used BoxGeometry and SphereGeometry for the shapes. Interestingly, BoxGeometry seems to receive light from PointLight just fine, but SphereGeometry does not.
Could you help me pinpoint what mistake I might have made? Thank you in advance for your assistance.
var width, height;
var camera, renderer, scene;
var position = {
earth: {
x: 200,
y: 1,
z: 0,
theta: 0,
traceRadius: 200
}
};
width = window.innerWidth;
height = window.innerHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, // Field of view
400 / 400, // Aspect ratio
.1, // Near
10000 // Far);
);
camera.lookAt(scene.position);
camera.position.set(0, 0, 1000);
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1);
renderer.setSize(width, height);
renderer.shadowMapEnabled = false;
var sunGeo = new THREE.SphereGeometry(70, 128, 128);
var sunMat = new THREE.MeshLambertMaterial({color: 0x00ff00});
var sunMesh = new THREE.Mesh(sunGeo, sunMat);
sunMesh.position.set(0, 0, 0);
sunMesh.castShadow = true;
sunMesh.receiveShadow = false;
scene.add(sunMesh);
var boxGeo = new THREE.BoxGeometry(50, 50, 50);
var boxMat = new THREE.MeshLambertMaterial({color: 0xfff0f0});
var boxMesh = new THREE.Mesh(boxGeo, boxMat);
boxMesh.position.set(-100, 100, 0);
boxMesh.castShadow = true;
scene.add(boxMesh);
var earthTraceGeo = new THREE.CircleGeometry(position.earth.traceRadius, 128, 128);
var edges = new THREE.EdgesGeometry(earthTraceGeo);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMate...
To see the complete code, click on this link: https://jsfiddle.net/ne7gjdnq/623/