Опитвам се да науча Thee.js. И това е доста право напред. Въпреки това по някаква причина не мога да накарам сенките да работят. Зададох castShadows, recieveShadows, shadowMapEnabled на true на местата, които намерих къде да ги задам, но те не показват сенки (никъде).
Това, което искам да направя, е моят импортиран модел да хвърля сенки върху себе си, за да можете всъщност да разберете какъв е моделът.
Това е текущият ми код:
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
init();
animate();
function init(){
container = document.createElement( "div" );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 0;
controls.noZoom = false;
controls.noPan = true;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0xffffff );
scene.add( ambient );
/*var spotLight = new THREE.SpotLight( 0xffffff,1.5, 40 );
spotLight.position.set( -400, 1200, 300 );
spotLight.castShadow = true;
spotLight.shadowDarkness = 0.5;
spotLight.shadowCameraVisible = true;
spotLight.target.position = new THREE.Object3D( 10, 10, 10 );
scene.add( spotLight );*/
var light = new THREE.DirectionalLight(0xffffff, 2);
light.position.x = -100;
light.position.y = 150;
light.shadowCameraVisible = true;
light.castShadow = true;
light.shadowCameraNear = 100;
light.shadowCameraFar = 300;
light.shadowCameraFov = 20;
light.shadowBias = -0.00022;
light.shadowDarkness = 0.5;
scene.add(light);
var groundGeo = new THREE.PlaneGeometry(400,400);
var groundMat = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var ground = new THREE.Mesh(groundGeo,groundMat);
ground.position.y = -20;
ground.rotation.x = -Math.PI/2;
ground.doubleSided = true;
ground.reciveShadow = true;
scene.add(ground);
var manager = new THREE.LoadingManager();
manager.onProgress = function( item, loaded, total ){
console.log( item, loaded, total );
};
var loader = new THREE.OBJLoader( manager );
//var texture = new THREE.Texture();
var texture = THREE.ImageUtils.loadTexture( "textures/red.jpg" );
texture.repeat.set( 0.7, 1 );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
var material = new THREE.MeshPhongMaterial({
ambient : 0x444444,
color : 0x8844AA,
shininess : 300,
specular : 0x33AA33,
shading : THREE.SmoothShading,
map : texture
});
loader.load("models/Shooza.obj",function(e){
var object = e;
object.traverse( function(child){
if(child instanceof THREE.Mesh){
child.material.color.setRGB(0.5,0,0);
child.castShadow = true;
child.reciveShadow = false;
//child.material.map = texture;
}
});
//object.scale = new THREE.Vector3(-100,-100,-100);
object.scale.set(0.2,0.2,0.2);
object.position.y -= 2.5;
object.castShadow = true;
object.reciveShadow = true;
scene.add(object);
});
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.shadowMapSoft = true;
container.appendChild( renderer.domElement );
}
function animate(){
requestAnimationFrame( animate );
controls.update();
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
И това е текущият ми резултат: http://gyazo.com/931f9103e01a5985508897fb1a5d0b88
.receiveShadow
- person gaitat   schedule 21.03.2015