Trois js shadows

Question

J'ai travaillé sur la scène dans tree.js pour aider à comprendre comment créer une scène de la même façon que dans 3dsMax. Je suis au point où j'essaie d'ajouter des ombres. D'après ce que j'ai lu, je devrais voir une ombre sur le sol, projetée par lightSpot_Right, et barStool étant l'objet d'occlusion. Mais je ne suis pas! Si quelqu'un a des suggestions, ce serait très apprécié!

///webGL - Locking down the Basics 
/////////////////////////////////////////////////////////////Environment Settings/////////////////////////////////////////////////////////////////////// 
///Renderer 
var scene = new THREE.Scene(); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 

renderer.shadowMapEnabled = true; 

document.body.appendChild(renderer.domElement); 

///Camera's 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
scene.add(camera); 

var cubeCamera = new THREE.CubeCamera(1, 1000, 256); // parameters: near, far, resolution 
cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter; // mipmap filter 
scene.add(cubeCamera); 

camera.position.set(0, 16, 25); 
camera.rotation.x += -0.32; 

///Controls 



///Lights 

var lightSpot_Right = new THREE.SpotLight(0xffffff); 
lightSpot_Right.position.set(50, 50, 0); 
lightSpot_Right.castShadow = true; 
lightSpot_Right.shadowMapWidth = 1024; 
lightSpot_Right.shadowMapHeight = 1024; 
lightSpot_Right.shadowCameraNear = 500; 
lightSpot_Right.shadowCameraFar = 4000; 
lightSpot_Right.shadowCameraFov = 30; 
scene.add(lightSpot_Right); 

var lightDirect_Left = new THREE.DirectionalLight(0xffffff, 0.25); 
lightDirect_Left.position.set(-1, 0, 0); 
scene.add(lightDirect_Left); 

//var lightAmb = new THREE.AmbientLight(0x262626); // soft white light 
//scene.add(lightAmb); 

///Loaders 
var loadTexture = new THREE.TextureLoader(); 
var loader = new THREE.JSONLoader(); 

///skyBox 
var imagePrefix = "textures/"; 
var directions = ["skyboxRight", "skyboxLeft", "skyboxTop", "skyboxBottom", "skyboxFront", "skyboxBack"]; 
var imageSuffix = ".jpg"; 

var skyMaterialArray = []; 
for (var i = 0; i < 6; i++) 
    skyMaterialArray.push(new THREE.MeshBasicMaterial({ 
     map: new THREE.TextureLoader().load(imagePrefix + directions[i] + imageSuffix), 
     side: THREE.BackSide 
    })); 
var skyMaterial = new THREE.MeshFaceMaterial(skyMaterialArray); 


var skyGeometry = new THREE.CubeGeometry(500, 500, 500); 
var skyBox = new THREE.Mesh(skyGeometry, skyMaterial); 
scene.add(skyBox); 

var groundPlaneMat = new THREE.MeshPhongMaterial({ 


}) 

////////////////////////////////////////////////////////Object Settings////////////////////////////////////////////////////////////////// 

//Textures 
var seatTexture = loadTexture.load("textures/Maharam_Mister_Notice_Diffuse.jpg"); 

var conceteDiffuse = loadTexture.load("textures/Contrete_Diffuse.jpg"); 
var conceteNormal = loadTexture.load("textures/Contrete_Normal.jpg"); 
var conceteSpecular = loadTexture.load("textures/Contrete_Specular.jpg"); 

///Materials 
var seatMaterial = new THREE.MeshLambertMaterial({ 
    map: seatTexture, 
    side: THREE.doubleside 
}); 
var frameMaterial = new THREE.MeshPhongMaterial({ 
    envMap: cubeCamera.renderTarget, 
    color: 0xcccccc 

}); 
var frameHardwareMat = new THREE.MeshPhongMaterial({ 
    color: 0x000000 
}); 
var feetMat = new THREE.MeshPhongMaterial({ 
    color: 0x050505, 
    shininess: 99 
}); 

var sphereMat = new THREE.MeshPhongMaterial({ 
    envMap: cubeCamera.renderTarget 

}); 

var groundMat = new THREE.MeshPhongMaterial({ 
    map: conceteDiffuse, 
    specularMap: conceteSpecular 
}); 

///Geometry and Meshes 
var barStool = new THREE.Object3D(); 
scene.add(barStool); 
barStool.castShadow = true; 

var seatMesh; 
loader.load("models/stoolSeat.js", function (geometry, material) { 
    seatMesh = new THREE.Mesh(geometry, seatMaterial); 
    seatMesh.scale.set(.5, .5, .5); 
    barStool.add(seatMesh); 

}); 

var frameMesh; 
loader.load("models/stoolFrame.js", function (geometry, material) { 
    frameMesh = new THREE.Mesh(geometry, frameMaterial); 
    frameMesh.scale.set(.5, .5, .5); 
    barStool.add(frameMesh); 

}); 

var frameFeetMesh; 
loader.load("models/stoolFeet.js", function (geometry, material) { 
    frameFeetMesh = new THREE.Mesh(geometry, feetMat); 
    frameFeetMesh.scale.set(.5, .5, .5); 
    barStool.add(frameFeetMesh); 
}); 

var frameHardwareMesh; 
loader.load("models/stoolHardware.js", function (geomtry, material) { 
    frameHardwareMesh = new THREE.Mesh(geomtry, frameHardwareMat); 
    frameHardwareMesh.scale.set(.5, .5, .5); 
    barStool.add(frameHardwareMesh); 
}); 


var sphereGeo = new THREE.SphereGeometry(2.5, 50, 50); 
var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat); 
scene.add(sphereMesh); 

sphereMesh.position.set(-10, 5, 0); 

var groundGeo = new THREE.PlaneGeometry(100, 50, 1); 
var groundMesh = new THREE.Mesh(groundGeo, groundMat); 
scene.add(groundMesh); 

groundMesh.rotation.x = -90 * Math.PI/180; 
groundMesh.receiveShadow = true; 


///Render Scene 

var render = function() { 

    requestAnimationFrame(render); 
    barStool.rotation.y += 0.01; 

    sphereMesh.visible = false; 
    cubeCamera.position.copy(sphereMesh.position); 
    cubeCamera.updateCubeMap(renderer, scene); 
    sphereMesh.visible = true; 
    /* 
    frameMesh.visible = false; 
    cubeCamera.position.copy(frameMesh.position); 
    cubeCamera.updateCubeMap(renderer, scene); 
    frameMesh.visible = true; 
    */ 
    renderer.render(scene, camera); 
}; 

render(); 

Answer 1

Je l'ai compris! Je devrais assigner .castShadow = true; aux objets mesh au lieu de le définir sur barStool qui est un objet Object3D vide qui est le parent des maillages contenant le tabouret.