Come creare un cubo ed piano con una texture in cui visualizzare l'ombra in funzione della luce presente nella scena mediante ThreeJS.
doctype html>
<html lang="en">
<head>
<title>My Example 6title>
<meta charset="utf-8">
<style>
body
{
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
style>
head>
<body>
<script src="./mrdoob-three.js-a3ba076/build/three.min.js">script>
<script src="./mrdoob-three.js-a3ba076//examples/js/controls/OrbitControls.js">script>
<script src="./mrdoob-three.js-a3ba076//examples/js/renderers/SoftwareRenderer.js">script>
<script>
var container, scene, camera, renderer, controls;
var cube;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'three.js
drag to change the point of view'</a href="http:></a href="http:>;
container.appendChild(info);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 4000);
scene.add(camera);
camera.position.set(-300, 415, -600);
camera.lookAt(scene.position);
if (window.WebGLRenderingContext) {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
} else
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xffffff, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var cubeMaterialArray = [];
cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0xff3333, transparent: true, opacity: 0.8 }));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0xff8800, transparent: true, opacity: 0.8 }));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0xffff33, transparent: true, opacity: 0.8 }));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0x33ff33, transparent: true, opacity: 0.8 }));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0x3333ff, transparent: true, opacity: 0.8 }));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0x8833ff, transparent: true, opacity: 0.8 }));
var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);
var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
cube = new THREE.Mesh(cubeGeometry, cubeMaterials);
cube.position.set(-100, 150, -50);
cube.castShadow = true;
scene.add(cube);
var axes = new THREE.AxisHelper(200);
scene.add(axes);
var floorTexture = new THREE.ImageUtils.loadTexture('images/desert.jpg');
var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
var floorGeometry = new THREE.PlaneGeometry(600, 600);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
floor.receiveShadow = true;
scene.add(floor);
var light = new THREE.DirectionalLight(0xdfebff, 1.75);
light.position.set(300, 400, 50);
light.position.multiplyScalar(1.3);
light.castShadow = true;
//light.shadowCameraVisible = true;
light.shadowMapWidth = 512;
light.shadowMapHeight = 512;
var d = 200;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;
light.shadowCameraFar = 1000;
light.shadowDarkness = 0.5;
scene.add(light);
scene.add(new THREE.AmbientLight(0x666666));
var skyBoxGeometry = new THREE.CubeGeometry(600, 600, 600);
var skyBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x9999ff, side: THREE.BackSide });
var skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial);
//scene.add(skyBox);
scene.fog = new THREE.FogExp2(0x9999ff, 0.00025);
window.addEventListener('resize', onWindowResize, false);
}
function animate() {
requestAnimationFrame(animate);
render();
update();
}
function update() {
controls.update();
}
function render() {
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
script>
body>
html>
Per modificare il punto di vista tenere premuto il tasto sinistro e muovere il mouse.