为什么我不能在three.js中使用点光源的影子？

我想要有阴影，我设置如下，真的想知道有什么问题？我有一个网格，立方体和球体作为它的一个子节点，并且我为它们设置了CastShadow和Receive shadow，但它没有影子的结果。我的部分代码：为什么我不能在three.js中使用点光源的影子？

var camera, scene, renderer, dice, dice1; 
scene = new THREE.Scene(); 
camera = new THREE.PerspectiveCamera(35,window.innerWidth/window.innerHeight, 0.1, 1000); 
// Z is up for objects intended to be 3D printed. 
camera.up.set(0, 0, 1); 
scene.add(camera); 
renderer = new THREE.WebGLRenderer({antialias: true}); 
renderer.setClearColor(0x999999); 
renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.shadowMap.enabled = true; 
renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
document.body.appendChild(renderer.domElement); 
var light = new THREE.PointLight(0x000000, 1, 1000); 
light.position.set(10, 10,10); 
light.castShadow = true; // default false 
scene.add(light); 
//Set up shadow properties for the light; 
light.shadow.mapSize.width = 1024; // default 
light.shadow.mapSize.height = 1024; // default 
light.shadow.camera.near = 1; // default 
light.shadow.camera.far = 1000 // default 
var grid = new THREE.GridHelper(50, 50, 0xffffff, 0x555555); 
grid.colorGrid = 0x00ff00; 
grid.rotateOnAxis(new THREE.Vector3(1, 0, 0), 90 * (Math.PI/180)); 
scene.add(grid); 
objects.push(grid); // add to the array for DragControls 
grid.receiveShadow=true; 
//Create a sphere that cast shadows (but does not receive them) 
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); 
sphere.castShadow = true; //default is false 
sphere.receiveShadow = false; //default 
sphere.position.set(10, 15, 10); 
scene.add(sphere); 
//initializing the color cubic 
var material = new THREE.MeshBasicMaterial({ 
color: 0xff0000}); 
dice = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5, 1, 1, 1), material); 
dice.position.set(10, 2.5, 10); 
dice.castShadow = true; 
grid.add(dice);

来源

2017-02-27 Zahra

添加'PointLightHelper'来帮助可视化您的'PointLight'并查看您的物体是否落入锥体内。 – gaitat

@gaitat我可以拖动我的飞机，所以我可以看到，虽然它落入锥体，但阴影不会出现。 – Zahra

你可以创建一个小提琴或codepen？ – gaitat

您不能在网格上投射阴影。它只是线条。在您的代码中添加此代码以查看阴影。

var plane = new THREE.Mesh(new THREE.PlaneGeometry(50,50), new THREE.MeshStandardMaterial({color: 0x00ff00 })); 
plane.castShadow = false; 
plane.receiveShadow = true; 
plane.position.set(0, 0, -1); 
scene.add(plane);

来源

2017-03-01 03:15:49 gaitat

就是这样。非常感谢你。 – Zahra

为什么我不能在three.js中使用点光源的影子？

回答

相关问题