3dsMax'da nasıl çalışacağım gibi bir sahneyi nasıl oluşturacağımı anlamanıza yardımcı olmak için, tree.js'de sahne üzerinde çalışıyorum. Gölgeler eklemeye çalıştığım noktadayım.Üç jd gölgeleri
Okuduğum yerden zeminde gölge görmek, lightSpot_Right ve barStool oklüzyon nesnesi olmak zorundadır. Ama ben değilim! Herhangi bir öneri varsa, bu çok takdir olurdu!
///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();
Böylece gölgelerimin düzgün çalışmasını sağladım. Ancak gölgelerin karanlığını kontrol edemedim. Çevrimiçi bulduğumdan, ilgili ışığa light.shadowDarkness eklemeyi düşünüyorsunuz. Bununla birlikte, üç yıldızın yeni sürümlerinde bu özelliğin artık mevcut olmadığını da okudum. Gölge karanlığını/yoğunluğunu nasıl kontrol edeceğini bilen var mı? –