Javascript Three.js.obj阴影不工作
我正在努力学习你。这是非常直截了当的。然而,由于某些原因,我无法使阴影工作。我已经将castShadows、ReceiveShadows、shadowMapEnabled在我找到的要设置它们的地方设置为true,但是它们不显示阴影(任何地方) 我想做的是,我导入的模型在其自身上投射阴影,以便您能够真正了解模型是什么 这是我当前的代码:Javascript Three.js.obj阴影不工作,javascript,three.js,shadow,Javascript,Three.js,Shadow,我正在努力学习你。这是非常直截了当的。然而,由于某些原因,我无法使阴影工作。我已经将castShadows、ReceiveShadows、shadowMapEnabled在我找到的要设置它们的地方设置为true,但是它们不显示阴影(任何地方) 我想做的是,我导入的模型在其自身上投射阴影,以便您能够真正了解模型是什么 这是我当前的代码: var container; var camera, scene, renderer; var mouseX = 0, mouseY = 0; init();
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);
}
这是我目前的结果:
我不知道你是否真的需要阴影。 您可以使用MeshBasicMaterial。 MeshBasicMaterial不计算任何照明 尝试改用MeshLambertMaterial或MeshPhongMaterial。 他们根据网格的标准进行照明。如果你激活castShadows和receiveShadows,它们也会显示阴影贴图
您可能需要指定阴影贴图的大小 聚光灯下
spotLight.shadowMapWidth = 512;
spotLight.shadowMapHeight = 512;
也可使用>>spotLight.shadowCameravible=true进行可视化 首先,你把方法拼写错了。应该是
。receiveShadow