gpt4 book ai didi

javascript - Three.js - 为什么这些项目的阴影看起来像这样?

转载 作者:搜寻专家 更新时间:2023-11-01 05:28:01 28 4
gpt4 key购买 nike

我正在学习 three.js。

我做了一个例子来练习,但是元素的阴影看起来不对或陌生。

This is my problem: the shadows

应该是这样的(这张图是旧教程的):

Good shadows

代码是这样的:

<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 教程或类(class)(我不在乎它是否免费),因为我有点迷失在这方面,就像我的网络开发人员一样我对这个 webGL 世界很感兴趣 :)

最佳答案

您可以通过增加阴影贴图的大小(以及分辨率)来提高阴影的质量(参见 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;

通过限制聚光灯的光锥 Angular 可以进一步提高画质

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, renderer.domElement );

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.BoxGeometry( 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-->
<script src="https://cdn.jsdelivr.net/npm/three@0.146/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.146/examples/js/controls/OrbitControls.js"></script>
<div id="WebGL-salida">
</div>

关于javascript - Three.js - 为什么这些项目的阴影看起来像这样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47996510/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com