Three.js-我的阴影没有正确显示.又称作到处都是黑线



我是Three.js的新手,在你的帮助下,我为我的Three..js模型添加了阴影,但当光线照射时,它会产生数千条线。我不知道是不是因为我做的模型太差了。或者我只能换个灯。图片如下。


千行图像



和代码


var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.01,
1000
);
//camera.rotation.x=-20*Math.PI/180;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.getElementById('section1').appendChild(renderer.domElement);

window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);

});
window.addEventListener('scroll', ()=> {
camera.position.y =  3.5 +(window.scrollY/400);
})

function mousemovement(event) {
const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
light.position.x = mouseX * 7 + 1 ;
light.position.y = mouseY * 4 + 4.5 ;
};
var numberofclicks = 2;
window.addEventListener('mousemove', mousemovement);
window.addEventListener('click', e =>{
numberofclicks = numberofclicks + 1;
if(numberofclicks % 2 == 0) {
window.addEventListener('mousemove', mousemovement);
}
else {
window.removeEventListener('mousemove', mousemovement);
}
});

//GLTF moldal
var loader = new GLTFLoader();
loader.load("wrktblv2.gltf", function (gltf) {
gltf.scene.traverse(function(child) {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
})
scene.add(gltf.scene);
});

var light = new THREE.PointLight(0xffffff, 2, 20);
light.castShadow = false;

light.position.set(1,10,2);
scene.add(light);

camera.position.set(1,3.5,9);


//const lightHelper = new THREE.PointLightHelper(light);
//const gridHelper = new THREE.GridHelper(200,50);
//scene.add(lightHelper, gridHelper);

function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);      
}
animate();

我试着改变光强度等等,但却搞不清楚。


请帮忙。

这可能是导入的映射。你的几何体/贴图有奇怪的边。例如,桌面和桌腿在最亮的2/7长度处都会变色。此外,地板与地毯成45度角改变纹理/云纹。

  1. 设置材质类型太基本(请尝试MeshStandard、MeshPhong…(
  2. 几何体重叠过近(请尝试偏移、mapSize…(
  3. 平铺材质偏移、旋转或重复(请尝试ClampToEdge,repeat=1…(
  4. 面材质为背面或透明

最新更新