Three.js.obj阴影不起作用
Three.js .obj shadows not working
我正在努力学习Thee.js。它非常直接。然而,由于某种原因,我无法让阴影发挥作用。我已经将castShadows、receiveShadows和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
您可能需要指定阴影贴图的大小用于聚光灯
spotLight.shadowMapWidth = 512;
spotLight.shadowMapHeight = 512;
也用于可视化使用>>spotLight.shadowCameraVisible=true;
我不知道你是否真的需要阴影。使用MeshBasicMaterial。MeshBasicMaterial不计算任何照明。
请尝试使用MeshLambertMaterial或MeshPhongMaterial。它们根据网格的标准进行照明。如果你激活castShadows并接收Shadows,他们也会给我们shadowMap。
http://threejs.org/docs/#Reference/Materials/MeshLambertMaterial
http://threejs.org/docs/#Reference/Materials/MeshPhongMaterial
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- Three.js.obj阴影不起作用
- HTML画布阴影模糊旋转后不起作用
- CSS嵌入阴影不起作用,正在创建垂直线
- Kinetijs:应用滤镜后阴影模糊不起作用
- 带框阴影的Css剪辑图像不起作用
- 盒式阴影不起作用