Three.js, управляющий тенями

Question

У меня проблемы с управлением тенями в THREE.js. Во-первых, тень в моей сцене слишком темная. Из того, что я прочитал, было свойство shadowDarkness, которое известно более длинным, доступным в текущей версии three.js. Кто-нибудь знает работу?

Кроме того, в прилагаемом изображении: геометрия «задней поверхности» не закрывает свет на тени сиденья - однако вы можете видеть заднюю поверхность стула в отражении сферы (cubeCamera). Кто-нибудь знает, как это исправить?

На стороне записки: хром дает мне ошибку «неперехваченный TypeError: Невозможно установить свойство„видимый“неопределенного» относительно

frameMesh.visible = false; 
    cubeCameraFrame.position.copy(frameMesh.position); 
    cubeCameraFrame.updateCubeMap(renderer, scene); 
    frameMesh.visible = true; 

части моего кода. Может ли это каким-то образом повлиять на тени? Я могу прокомментировать эту часть кода, и это мало повлияет на «отражающий» внешний вид камина. Однако это больше не отражается в этой сфере. Буду признателен за любую оказанную помощь.

///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.shadowMapType = THREE.PCFSoftShadowMap; 
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); 

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

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

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

///Controls 



///Lights 


var lightSpot_Right = new THREE.SpotLight(0xffffff); 
lightSpot_Right.position.set(50, 50, 0); 
lightSpot_Right.intensity = 1.25; 
lightSpot_Right.castShadow = true; 

lightSpot_Right.shadowDarkness = 0.1; 

lightSpot_Right.shadowMapWidth = 2048; 
lightSpot_Right.shadowMapHeight = 2048; 

lightSpot_Right.shadowCameraNear = 1; 
lightSpot_Right.shadowCameraFar = 100; 
lightSpot_Right.shadowCameraFov = 65; 
scene.add(lightSpot_Right); 

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

///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(1000, 1000, 1000); 
var skyBox = new THREE.Mesh(skyGeometry, skyMaterial); 
scene.add(skyBox); 


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

//Textures 
var seatTexture = loadTexture.load("textures/Maharam_Mister_Notice_Diffuse.jpg"); 
seatTexture.wrapS = THREE.RepeatWrapping; 
seatTexture.wrapT = THREE.RepeatWrapping; 
seatTexture.repeat.set(3, 3); 

var conceteDiffuse = loadTexture.load("textures/Contrete_Diffuse.jpg"); 
conceteDiffuse.wrapS = THREE.RepeatWrapping; 
conceteDiffuse.wrapT = THREE.RepeatWrapping; 
conceteDiffuse.repeat.set(3, 3); 
var conceteNormal = loadTexture.load("textures/Contrete_Normal.jpg"); 
conceteNormal.wrapS = THREE.RepeatWrapping; 
conceteNormal.wrapT = THREE.RepeatWrapping; 
conceteNormal.repeat.set(3, 3); 
var conceteSpecular = loadTexture.load("textures/Contrete_Specular.jpg"); 
conceteSpecular.wrapS = THREE.RepeatWrapping; 
conceteSpecular.wrapT = THREE.RepeatWrapping; 
conceteSpecular.repeat.set(3, 3); 

///Materials 
var seatMaterial = new THREE.MeshLambertMaterial({ 
    map: seatTexture, 
    side: THREE.DoubleSide 
}); 
var frameMaterial = new THREE.MeshPhongMaterial({ 
    envMap: cubeCameraFrame.renderTarget, 
    color: 0xcccccc, 
    emissive: 0x404040, 
    shininess: 10, 
    reflectivity: .8 
}); 
var frameHardwareMat = new THREE.MeshPhongMaterial({ 
    color: 0x000000 
}); 
var feetMat = new THREE.MeshPhongMaterial({ 
    color: 0x050505, 
    shininess: 99 
}); 

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

}); 

var groundMat = new THREE.MeshPhongMaterial({ 
    map: conceteDiffuse, 
    specularMap: conceteSpecular, 
    normalMap: conceteNormal, 
    normalScale: new THREE.Vector2(0.0, 0.6), 
    shininess: 50 
}); 

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

var seatMesh; 
loader.load("models/stoolSeat.js", function (geometry, material) { 
    seatMesh = new THREE.Mesh(geometry, seatMaterial); 
    seatMesh.scale.set(.5, .5, .5); 
    seatMesh.castShadow = true; 
    seatMesh.receiveShadow = true; 
    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); 
    frameMesh.castShadow = true; 
    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); 
    frameFeetMesh.castShadow = true; 
    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; 
    skyBox.rotation.y -= 0.0002; 

    sphereMesh.visible = false; 
    cubeCameraSphere.position.copy(sphereMesh.position); 
    cubeCameraSphere.updateCubeMap(renderer, scene); 
    sphereMesh.visible = true; 

    //frameMesh.visible = false; 
    //cubeCameraFrame.position.copy(frameMesh.position); 
    //cubeCameraFrame.updateCubeMap(renderer, scene); 
    //frameMesh.visible = true; 

    renderer.render(scene, camera); 
}; 

render(); 

Answer 1

Тень темнота была удалена. Лучшая работа - добавить окружающий свет к вашей сцене.

scene.add(new THREE.AmbientLight(0xffffff, 0.3); 

Вы можете одновременно снизить интенсивность вашего SpotLight.

Тень на самом деле правильная, учитывая, что только обратные лица бросают тени. Похоже, что стул полого под кроватью - другими словами, сиденье не является закрытым объемом. Добавьте нижнюю часть нижней части сиденья.

В качестве альтернативы, вы можете оставить свою модель как есть и эксперимент с

renderer.shadowMap.cullFace = THREE.CullFaceNone; 

Наконец, вы получаете сообщение об ошибке, потому что вы обращаетесь к frameMesh в цикле анимации, прежде чем она определена в загрузчик обратного вызова. Обратный вызов является асинхронным.

if (frameMesh !== undefined) { 
    // your code 
} 

Three.js R.75