gpt4 book ai didi

javascript - three.js 定向光影

转载 作者:行者123 更新时间:2023-11-30 08:44:41 24 4
gpt4 key购买 nike

http://jsfiddle.net/wp6E3/3/

var camera, scene, renderer;
var cubes = [];

init();
animate();

function init() {

scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0x212223));

for (var i = 0; i < 10; i++) {
var cubeGeometry = new THREE.CubeGeometry(1, 1.5, 1);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x1ec876 });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(i*1.2, 0, 0.5);
cube.castShadow = true;
scene.add(cube);

cubes.push(cube);
}

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.x = -4;
camera.position.y = -4;
camera.position.z = 20;
camera.lookAt(cubes[5].position);
scene.add(camera);

var terrainGeo = new THREE.PlaneGeometry(50, 50);
var terrainMaterial = new THREE.MeshLambertMaterial({ color: 0xc0c0a0 });
var terrain = new THREE.Mesh(terrainGeo, terrainMaterial);
terrain.receiveShadow = true;
scene.add(terrain);

var light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadowCameraVisible = true;
light.position.set(-3, 1, 5);
scene.add(light);
scene.add( new THREE.DirectionalLightHelper(light, 0.2) );

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = false;
document.body.appendChild(renderer.domElement);
}

function animate() {
requestAnimationFrame(animate);
for (var i = 0; i < cubes.length; i++) {
cubes[i].rotation.x += 0.01 * i;
cubes[i].rotation.y += 0.02 * i;
}

renderer.render(scene, camera);
}

为什么阴影不起作用?

我查看了相关问题和 three.js 引用资料,但不明白我做错了什么。

Three.js shadows not working properly

How to create directional light shadow in Three.JS?

ThreeJS shadow not rendering

http://threejs.org/docs/#Reference/Lights/DirectionalLight

http://learningthreejs.com/blog/2012/01/20/casting-shadows/

最佳答案

首先,在您的场景中添加一个相机 Controller ,这样您就可以看到您在做什么。现在您可以旋转相机以获得不同的 View 。

controls = new THREE.OrbitControls( camera, renderer.domElement );

其次,在使用 jsfiddle 时,一定要链接到最新版本的 three.js 库。

<script src="http://threejs.org/build/three.min.js"></script>

为了获得合适的分辨率,将影子相机紧贴场景放置很重要。您可以通过设置以下内容来做到这一点:

light.shadowCameraLeft = -20; // or whatever value works for the scale of your scene
light.shadowCameraRight = 20;
light.shadowCameraTop = 20;
light.shadowCameraBottom = -20;

对于平行光,只有光位置的“方向”很重要。然而,当涉及阴影贴图时,灯光的实际位置很重要,因为它也控制着阴影相机。

light.position.set( -60, 20, 100 );

这是一个更新的 fiddle 。用鼠标旋转相机。

http://jsfiddle.net/wp6E3/4/

three.js r.66

关于javascript - three.js 定向光影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23025032/

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