Three.js denetimlerini gölgeler

Question

THREE.js'de gölgeleri denetleme konusunda sorun yaşıyorum. İlk önce, sahnemdeki gölge çok karanlık. Okuduğum kadarıyla, bir shadowDarkness özelliği vardı; bu, üç.js'nin geçerli sürümünde daha uzun süre kullanılabilir. Etrafta bir iş bilen var mı?

Ayrıca, ekli görüntüde: "arka yüz" geometrisi, koltuğun gölgesinde ışığı kapatmaz - bununla birlikte, tablanın arka yüzünü kürenin yansımasında görebilirsiniz (cubeCamera). Bunu nasıl düzelteceğini bilen var mı? Yan not

: krom bana bir hata veriyor: Benim kod

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

kısmı ile ilgili olarak "Yakalanmayan TypeError, mülkiyet 'görünür' tanımsız bir ayarlanamaz". Bu gölgeleri bir şekilde etkileyebilir mi? Kodun bir kısmını yorumlayabilirim ve stoolframes "yansıtıcı" görünüm üzerinde çok az etkisi olacaktır. Ancak o zaman artık küreye yansıyor. Herhangi bir yardım çok takdir edilir.

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

Gölge karanlık kaldırıldı. En iyi çalışma, ortamınıza ortam ışığı eklemektir.

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

Sen aynı anda sizin SpotLight yoğunluğunu azaltmak isteyebilir.

Gölge, yalnızca arka yüzler gölgelendirme gölgeleri verildiği zaman doğrudur. Dışkı oturma yerinin altında oyuk görünür - diğer bir deyişle koltuk kapalı bir hacim değildir. Koltuğunuzun alt tarafına bir alt ekleyin.

Alternatif olarak, bu yükleyici geri arama tanımlanan önce animasyon döngüsünde frameMesh erişen çünkü Son olarak, hatayı alıyorsanız

renderer.shadowMap.cullFace = THREE.CullFaceNone; 

ile olduğu gibi model ve deney bırakabilir. Geri arama asenkrondir.

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

Three.js r.75