//.................SETUP................//
import {
WebGLRenderer,
PerspectiveCamera,
Scene,
BoxGeometry,
MeshBasicMaterial,
Mesh,
Group,
PlaneGeometry,
AxesHelper,
GridHelper,
DoubleSide,
DirectionalLight,
AmbientLight,
MeshStandardMaterial,
DirectionalLightHelper,
Fog,
TextureLoader,
CubeTextureLoader,
SphereGeometry,
} from './three.module.js';
import { OrbitControls } from './q.js';
//................PROGRAM...............//
var renderer, camera, scene, light, light1, geometry, material, mesh;
// renderer
renderer = new WebGLRenderer({canvas:
document.getElementById('Canvas'), antialias: true, alfa: true});
//alfa: true makes empty pixels in the canvas show underlying html content so that if there is an image under an empty canvas element, you can still see the image.
renderer.setClearColor(0x555555);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enable = true;
// camera
camera = new PerspectiveCamera(35, window.innerWidth /
window.innerHeight, 0.1, 6000);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);
//controls
var orbitcontrol = new OrbitControls(camera, renderer.domElement)
//scene
scene = new Scene();
//lights
//var ambientlight = new AmbientLight(0x333333);
//scene.add(ambientlight);
var sun = new DirectionalLight(0xffffff, 0.8);
sun.castShadow = true;
scene.add(sun);
sun.position.set(0, 40, 0);
//fog
//scene.fog = new Fog(0xffffff, 0, 200);
//helpers
var gridhelper = new GridHelper(10, 10);
scene.add(gridhelper);
var axishelper = new AxesHelper(3);
scene.add(axishelper);
var directionallighthelper = new DirectionalLightHelper(sun, 10, 0xff0000);
scene.add(directionallighthelper);
//material loaders
var bildimport = new TextureLoader().load('a.jpg');
var bildimport2 = new TextureLoader().load('träd.jpg');
var textureLoader = new TextureLoader();
scene.background = textureLoader.load('a.jpg');
//objects
//sphere
var geometrySphere = new SphereGeometry(10, 15);
var materialSphere = new MeshStandardMaterial({
color: 0xffff00f,
flatShading: true,
//wireframe: true,
});
var meshSphere = new Mesh(geometrySphere, materialSphere);
scene.add(meshSphere);
meshSphere.position.set(0,20,0);
meshSphere.castShadow = true;
meshSphere.receiveShadow = true;
//cube
geometry = new BoxGeometry(1, 1, 1);
var alt_material = [
new MeshBasicMaterial({map: bildimport2}),
new MeshBasicMaterial({map: bildimport}),
new MeshBasicMaterial({map: bildimport2}),
new MeshBasicMaterial({map: bildimport}),
new MeshBasicMaterial({map: bildimport2}),
new MeshBasicMaterial({map: bildimport}),
];
material = new MeshStandardMaterial({
color: 0xff0000,
map: bildimport2,
});
mesh = new Mesh(geometry, alt_material);
mesh.position.set(0, 50, 0);
mesh.castShadow = true;
scene.add(mesh);
//plane
var geometry2 = new PlaneGeometry(50, 50);
var material2 = new MeshStandardMaterial({
color: 0xfff00,
map: bildimport,
side: DoubleSide, // Makes the plane colored on both sides instead of just on the top.
});
var mesh2 = new Mesh(geometry2, material2);
mesh2.receiveShadow = true;
scene.add(mesh2);
mesh2.rotation.x = -0.5 * Math.PI;
//groups
//renderer loop
requestAnimationFrame(render);
var i = 0;
var increase_of_i = 0.01;
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
// mesh.position.y = 100 * Math.abs(Math.sin(i));
mesh.scale.x = 1 + Math.abs(Math.sin(2*i));
mesh.scale.y = 1 + Math.abs(Math.sin(2*i));
mesh.scale.z = 1 + Math.abs(Math.sin(2*i));
i += increase_of_i;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
I'm trying to get the plane to receive a shadow from the sphere, but I seem to be making a mistake somewhere along the way. Does anyone have any ideas on how to fix it?