Drei js Schatten

Question

Ich habe an Szene in tree.js gearbeitet, um zu verstehen, wie man eine Szene ähnlich wie ich in 3dsMax erstellen würde. Ich bin an dem Punkt, an dem ich versuche, Schatten hinzuzufügen.

Von dem, was ich gelesen habe, sollte ich einen Schatten auf dem Boden sehen, der von lightSpot_Right geworfen wird, und barStool das Okklusionsobjekt ist. Aber ich bin nicht! Wenn jemand irgendwelche Vorschläge hat, würde es sehr geschätzt werden!

///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

Ich fand es heraus! Ich hätte sagen sollen .castShadow = true; zu den Mesh-Objekten, anstatt es auf barStool zu setzen, welches ein leeres Object3D ist, welches das Elternteil der Meshes ist, die den Stuhl enthalten.