Soy nuevo en Three.js, con la ayuda de su chico, agregué sombras a mi modelo de three.js; sin embargo, cuando la luz incide, crea miles de líneas. Nose si es por lo mal que hice el modelo. o simplemente tengo que cambiar la luz. La imagen está abajo.
y el codigo
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();Intenté cambiar la intensidad de la luz y esas cosas, pero no pude resolverlo.
Por favor ayuda.
Probablemente sea el mapeo importado. Su geometría/mapas tienen bordes extraños. Por ejemplo, tanto la parte superior de la mesa como la pata están decoloradas en los 2/7 más brillantes de las longitudes. Además, el piso cambia de textura/muaré en un ángulo de 45 grados con respecto a la alfombra.