Three.js - これらのアイテムの影がこのように見えるのはなぜですか？

Question

私はthree.jsについて学んでいます。

私は練習するための例を示していますが、アイテムの影が間違っている、または見知らぬ人に見えています。

は、この（この画像は、古いチュートリアルである）のようにする必要があります：

、コードはこれです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js"></script> 
 

 
<div id="WebGL-salida"> 
 
</div> 
 

 
<script type="text/javascript"> 
 
    $(function() { 
 
    var scene = new THREE.Scene(); 
 

 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 
 

 
    var renderer = new THREE.WebGLRenderer(); 
 

 
    var color = new THREE.Color("rgb(200, 250, 250)"); 
 
    renderer.setClearColor(new THREE.Color(color)); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 

 
    renderer.shadowMap.enabled = true; 
 
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap 
 

 

 
    var ejesAyuda = new THREE.AxesHelper(20); //son los ejes de ayuda creo 
 
    scene.add(ejesAyuda); 
 

 
    var planeGeometry = new THREE.PlaneGeometry(60, 20); 
 

 
    var planeMaterial = new THREE.MeshLambertMaterial({ 
 
     color: 0xcccccc 
 
    }); 
 

 
    var plane = new THREE.Mesh(planeGeometry, planeMaterial); 
 

 
    plane.receiveShadow = true; 
 

 

 
    plane.rotation.x = -0.5 * Math.PI; // -90º 
 
    plane.position.x = 15; 
 
    plane.position.y = 0; 
 
    plane.position.z = 0; 
 

 
    scene.add(plane); 
 

 

 
    var cubeGeometry = new THREE.CubeGeometry(4, 4, 4); 
 

 

 
    var cubeMaterial = new THREE.MeshLambertMaterial({ 
 
     color: 0xff0000 
 
    }); 
 
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
 

 
    cube.castShadow = true; //con esto le indicamos que queremos que emita sombra 
 

 
    cube.position.x = -4; 
 
    cube.position.y = 3; 
 
    cube.position.z = 0; 
 

 
    scene.add(cube); 
 

 
    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); 
 
    var sphereMaterial = new THREE.MeshLambertMaterial({ 
 
     color: 0x7777ff 
 
    }); 
 
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); 
 

 
    sphere.castShadow = true; //con esto le indicamos que queremos que emita sombra 
 

 
    sphere.position.x = 20; 
 
    sphere.position.y = 4; 
 
    sphere.position.z = 2; 
 
    scene.add(sphere); 
 

 
    camera.position.x = -30; 
 
    camera.position.y = 40; 
 
    camera.position.z = 30; 
 
    camera.lookAt(scene.position); 
 

 
    var spotLight = new THREE.SpotLight(0xffffff, 0.8); 
 
    spotLight.position.set(-40, 60, -10); 
 
    spotLight.castShadow = true; 
 
    scene.add(spotLight); 
 

 
    $("#WebGL-salida").append(renderer.domElement); 
 
    renderer.render(scene, camera); 
 
    }); 
 
</script>

そして、あなたが良い初心者のthree.jsチュートリアルやコース（私はそれが無料ではない場合は気にしない）について知っていれば、私は少しこれで失われているとWeb開発者のように私に教えてくださいこのWebGLの世界に興味を持って:)

Answer 1

あなたは（SpotLightを参照）、シャドウマップのサイズを増やすことで、影の品質を向上させることができます

var spotLight = new THREE.SpotLight(0xffffff, 0.8); 
spotLight.position.set(-40, 60, -10); 
spotLight.castShadow = true; 

spotLight.shadow.mapSize.width = 2048; 
spotLight.shadow.mapSize.height = 2048; 

品質は光円錐を制限することによってさらに向上させることができますスポットの角度：

spotLight.angle = Math.PI/8.0; 

注意してください、このカウシャドウマップの解像度が高くなり、シャドウマップがマッピングされる領域が減少することを示している。

は、コードスニペットを参照してください：

var renderer, camera, scene, controls; 
 

 
var init = function(){ 
 
    scene = new THREE.Scene(); 
 
    camera = new THREE.PerspectiveCamera (45, window.innerWidth/window.innerHeight, 0.1, 1000); 
 
    renderer = new THREE.WebGLRenderer(); 
 
    controls = new THREE.OrbitControls(camera); 
 

 
    var color = new THREE.Color("rgb(200, 250, 250)"); 
 
    renderer.setClearColor(new THREE.Color(color)); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 

 
    renderer.shadowMap.enabled = true; 
 
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap 
 

 

 
    var ejesAyuda = new THREE.AxesHelper(20); //son los ejes de ayuda creo 
 
    scene.add(ejesAyuda); 
 

 
    var planeGeometry = new THREE.PlaneGeometry(60, 20); 
 
    var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc}); 
 

 
    var plane = new THREE.Mesh(planeGeometry, planeMaterial); 
 
    plane.receiveShadow = true; 
 
    plane.rotation.x = -0.5*Math.PI; // -90º 
 
    plane.position.x = 15; 
 
    plane.position.y = 0; 
 
    plane.position.z = 0; 
 
    scene.add(plane); 
 

 

 
    var cubeGeometry = new THREE.CubeGeometry(4, 4, 4); 
 
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); 
 
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
 
    cube.castShadow = true; //con esto le indicamos que queremos que emita sombra 
 
    cube.position.x= -4; 
 
    cube.position.y = 3; 
 
    cube.position.z = 0; 
 
    scene.add(cube); 
 

 
    var sphereGeometry = new THREE.SphereGeometry (4, 20, 20); 
 
    var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff}); 
 
    var sphere = new THREE.Mesh (sphereGeometry, sphereMaterial); 
 
    sphere.castShadow = true; //con esto le indicamos que queremos que emita sombra 
 
    sphere.position.x = 20; 
 
    sphere.position.y = 4; 
 
    sphere.position.z = 2; 
 
    scene.add(sphere); 
 

 
    camera.position.x = -30; 
 
    camera.position.y = 40; 
 
    camera.position.z = 30; 
 
    camera.lookAt(scene.position); 
 

 
    var spotLight = new THREE.SpotLight(0xffffff, 0.8); 
 
    spotLight.position.set(-40, 60, -10); 
 
    spotLight.castShadow = true; 
 
    spotLight.angle = Math.PI/8.0; 
 
    spotLight.shadow.mapSize.width = 2048; 
 
    spotLight.shadow.mapSize.height = 2048; 
 
    scene.add(spotLight); 
 

 
    document.getElementById("WebGL-salida").append(renderer.domElement); 
 
    resize(); 
 
    window.onresize = resize; 
 
}; 
 

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

 
function resize() { 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    camera.aspect = window.innerWidth/window.innerHeight; 
 
    camera.updateProjectionMatrix(); 
 
//controls.handleResize(); 
 
} 
 

 
init(); 
 
animate();

<script src="https://threejs.org/build/three.min.js"></script> 
 
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 
 
<div id="WebGL-salida"> 
 
</div>

Answer 2

あなたはまた、セグメントの数を増やすことができます。今すぐあなたは持っています

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); 

これらの2つの20は良いレンダリングのためにわずかに低いです。私は一般的に32,32を使用しています。