index100
var Colors = {
cyan: 0x248079,
brown: 0xA98F78,
brownDark: 0x9A6169,
green: 0x65BB61,
greenLight: 0xABD66A,
blue: 0x6BC6FF
};
var scene = new THREE.Scene();
var h = window.innerHeight,
w = window.innerWidth;
var aspectRatio = w / h,
fieldOfView = 25,
nearPlane = .1,
farPlane = 1000;
var camera = new THREE.PerspectiveCamera(
fieldOfView,
aspectRatio,
nearPlane,
farPlane);
var renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true,
antialias: true
});
const dpi = window.devicePixelRatio;
renderer.setSize(w * dpi, h * dpi);
const theCanvas = document.getElementById('canvas');
theCanvas.style.width = `${w}px`;
theCanvas.style.height = `${h}px`;
renderer.shadowMapEnabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
camera.position.set(-5, 6, 8);
// camera.position.set(0,0,8); // front
// camera.position.set(-10,.2,0); //left
// camera.position.set(0,10,0); //top
// camera.position.y=4;
camera.lookAt(new THREE.Vector3(0, 0, 0));
//Ambient light
var light = new THREE.AmbientLight(0xffffff, .5);
var shadowLight = new THREE.DirectionalLight(0xffffff, .5);
shadowLight.position.set(200, 200, 200);
shadowLight.castShadow = true;
var backLight = new THREE.DirectionalLight(0xffffff, .2);
backLight.position.set(-100, 200, 50);
backLight.castShadow = true;
scene.add(backLight);
scene.add(light);
scene.add(shadowLight);
// grassland left
var geometry_left = new THREE.BoxGeometry(2, .2, 2);
var material_grass = new THREE.MeshLambertMaterial({
color: Colors.greenLight
});
var ground_left = new THREE.Mesh(geometry_left, material_grass);
ground_left.position.set(-1, 0.1, 0);
scene.add(ground_left);
customizeShadow(ground_left, .25) // mess, opacity
//river
var geometry_river = new THREE.BoxGeometry(1, .1, 2);
var material_river = new THREE.MeshLambertMaterial({
color: Colors.blue
});
var river = new THREE.Mesh(geometry_river, material_river);
river.position.set(.5, .1, 0);
scene.add(river);
customizeShadow(river, .08) // mess, opacity
//river bed
var geometry_bed = new THREE.BoxGeometry(1, .05, 2);
var bed = new THREE.Mesh(geometry_bed, material_grass);
bed.position.set(.5, .025, 0);
scene.add(bed);
//grassland right
var geometry_right = new THREE.BoxGeometry(1, .2, 2);
var ground_right = new THREE.Mesh(geometry_right, material_grass);
ground_right.position.set(1.5, 0.1, 0);
scene.add(ground_right);
customizeShadow(ground_right, .25) // mess, opacity
var tree = function (x, z) {
this.x = x;
this.z = z;
//trunk
var material_trunk = new THREE.MeshLambertMaterial({
color: Colors.brownDark
});
var geometry_trunk = new THREE.BoxGeometry(.15, .15, .15);
var trunk = new THREE.Mesh(geometry_trunk, material_trunk);
trunk.position.set(this.x, .275, this.z);
trunk.castShadow = true;
trunk.receiveShadow = true;
scene.add(trunk);
//leaves
var geometry_leaves = new THREE.BoxGeometry(.25, .4, .25);
var material_leaves = new THREE.MeshLambertMaterial({
color: Colors.green
});
var leaves = new THREE.Mesh(geometry_leaves, material_leaves);
leaves.position.set(this.x, .2 + .15 + .4 / 2, this.z);
leaves.castShadow = true;
customizeShadow(leaves, .25) // mess, opacity
scene.add(leaves);
}
//left
tree(-1.75, -.85);
tree(-1.75, -.15);
tree(-1.5, -.5);
tree(-1.5, .4);
tree(-1.25, -.85);
tree(-1.25, .75);
tree(-.75, -.85);
tree(-.75, -.25);
tree(-.25, -.85);
//right
tree(1.25, -.85);
tree(1.25, .75);
tree(1.5, -.5);
tree(1.75, -.85);
tree(1.75, .35);
function customizeShadow(t, a) { //opacity, target mesh
var material_shadow = new THREE.ShadowMaterial({
opacity: a
});
var mesh_shadow = new THREE.Mesh(t.geometry, material_shadow);
mesh_shadow.position.set(t.position.x, t.position.y, t.position.z);
mesh_shadow.receiveShadow = true;
scene.add(mesh_shadow);
}
var material_wood = new THREE.MeshLambertMaterial({
color: Colors.brown
});
//bridge - wood block
for (var i = 0; i < 6; i++) {
var geometry_block = new THREE.BoxGeometry(.15, .02, .4);
var block = new THREE.Mesh(geometry_block, material_wood);
block.position.set(0 + .2 * i, .21, .2);
block.castShadow = true;
block.receiveShadow = true;
scene.add(block);
}
//bridge - rail
var geometry_rail_v = new THREE.BoxGeometry(.04, .3, .04);
var rail_1 = new THREE.Mesh(geometry_rail_v, material_wood);
rail_1.position.set(-.1, .35, .4);
rail_1.castShadow = true;
customizeShadow(rail_1, .2);
scene.add(rail_1);
var rail_2 = new THREE.Mesh(geometry_rail_v, material_wood);
rail_2.position.set(1.1, .35, .4);
rail_2.castShadow = true;
customizeShadow(rail_2, .2);
scene.add(rail_2);
var rail_3 = new THREE.Mesh(geometry_rail_v, material_wood);
rail_3.position.set(-.1, .35, 0);
rail_3.castShadow = true;
customizeShadow(rail_3, .2);
scene.add(rail_3);
var rail_4 = new THREE.Mesh(geometry_rail_v, material_wood);
rail_4.position.set(1.1, .35, 0);
rail_4.castShadow = true;
customizeShadow(rail_4, .2);
scene.add(rail_4);
var geometry_rail_h = new THREE.BoxGeometry(1.2, .04, .04);
var rail_h1 = new THREE.Mesh(geometry_rail_h, material_wood);
rail_h1.position.set(0.5, .42, .4);
rail_h1.castShadow = true;
customizeShadow(rail_h1, .2);
scene.add(rail_h1);
var rail_h2 = new THREE.Mesh(geometry_rail_h, material_wood);
rail_h2.position.set(0.5, .42, 0);
rail_h2.castShadow = true;
customizeShadow(rail_h2, .2);
scene.add(rail_h2);
var Drop = function () {
this.geometry = new THREE.BoxGeometry(.1, .1, .1);
this.drop = new THREE.Mesh(this.geometry, material_river);
this.drop.position.set(Math.random(.1, .9), 0.1, 1 + (Math.random() - .5) * .1);
scene.add(this.drop);
this.speed = 0;
this.lifespan = (Math.random() * 50) + 50;
this.update = function () {
this.speed += .0007;
this.lifespan--;
this.drop.position.x += (.5 - this.drop.position.x) / 70;
this.drop.position.y -= this.speed;
}
}
var drops = [];
var count = 0;
var render = function () {
requestAnimationFrame(render);
if (count % 3 == 0) {
for (var i = 0; i < 5; i++) {
drops.push(new Drop());
}
}
count++;
for (var i = 0; i < drops.length; i++) {
drops[i].update();
if (drops[i].lifespan <0) {
scene.remove(scene.getObjectById(drops[i].drop.id));
drops.splice(i, 1);
}
}
renderer.render(scene, camera);
}
render();