Javascript 三重阴影不透明度
嘿,我在画布上加载了一个自定义模型,一切都很好。我得到的唯一问题是,我没有胶水如何使阴影在模型本身上透明(模型应该投射和接收阴影) 我的代码如下所示:Javascript 三重阴影不透明度,javascript,canvas,3d,three.js,shadow,Javascript,Canvas,3d,Three.js,Shadow,嘿,我在画布上加载了一个自定义模型,一切都很好。我得到的唯一问题是,我没有胶水如何使阴影在模型本身上透明(模型应该投射和接收阴影) 我的代码如下所示: var loader = new THREE.JSONLoader(); loader.load('model/p3.json', handle_load); var mesh; function handle_load(geometry, materials) { var material = new
var loader = new THREE.JSONLoader();
loader.load('model/p3.json', handle_load);
var mesh;
function handle_load(geometry, materials) {
var material = new THREE.MeshPhongMaterial();
mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
mesh.position.z = 0;
mesh.position.y = 0;
mesh.rotation.y = 5;
//LIGHT
var ambient = new THREE.AmbientLight(0xffffff, 0.15);
ambient.target = mesh;
scene.add(ambient);
var light = new THREE.DirectionalLight(0xffffff, 1);
light.target = mesh;
light.castShadow = true;
light.position.z = -150;
light.position.y = 150;
light.position.x = 150;
light.shadow.bias = 0;
light.shadowDarkness = 0.2;
light.shadow.mapSize.width = 2048 * 2;
light.shadow.mapSize.height = 2048 * 2;
scene.add(light);
mesh.receiveShadow = true;
mesh.castShadow = true;
}
var shadowmaterial = new THREE.ShadowMaterial();
shadowmaterial.opacity = 0.2;
var material2 = new THREE.MeshPhongMaterial({
color: 0xffffff,
});
var geometry3 = new THREE.PlaneGeometry(500, 500, 100, 100);
var mesh3 = new THREE.Mesh(geometry3, shadowmaterial);
mesh3.rotation.x = -90 * Math.PI / 180;
mesh3.position.y = 0;
scene.add(mesh3);
mesh3.receiveShadow = true;
渲染如下所示:
var loader = new THREE.JSONLoader();
loader.load('model/p3.json', handle_load);
var mesh;
function handle_load(geometry, materials) {
var material = new THREE.MeshPhongMaterial();
mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
mesh.position.z = 0;
mesh.position.y = 0;
mesh.rotation.y = 5;
//LIGHT
var ambient = new THREE.AmbientLight(0xffffff, 0.15);
ambient.target = mesh;
scene.add(ambient);
var light = new THREE.DirectionalLight(0xffffff, 1);
light.target = mesh;
light.castShadow = true;
light.position.z = -150;
light.position.y = 150;
light.position.x = 150;
light.shadow.bias = 0;
light.shadowDarkness = 0.2;
light.shadow.mapSize.width = 2048 * 2;
light.shadow.mapSize.height = 2048 * 2;
scene.add(light);
mesh.receiveShadow = true;
mesh.castShadow = true;
}
var shadowmaterial = new THREE.ShadowMaterial();
shadowmaterial.opacity = 0.2;
var material2 = new THREE.MeshPhongMaterial({
color: 0xffffff,
});
var geometry3 = new THREE.PlaneGeometry(500, 500, 100, 100);
var mesh3 = new THREE.Mesh(geometry3, shadowmaterial);
mesh3.rotation.x = -90 * Math.PI / 180;
mesh3.position.y = 0;
scene.add(mesh3);
mesh3.receiveShadow = true;
非常感谢您的帮助因为您的网格材质始终为灰色,地板为白色,阴影中始终会有对比。从我的发现来看,阴影旨在将这种物理真实感嵌入其中,不允许通过调整材质和灯光来直接调整阴影属性 可以将平面材质颜色降为灰色而不是白色,并提高灯光强度。或者使你的网布材质变亮,降低光照强度 您还可以添加更多灯光并进行调整。增加环境光和减少方向光应该会降低阴影对比度。其他类型的灯光也会产生效果
您还可以播放材质的不同方面,使其变得更白、更暗,从而影响阴影效果。反射率就是一个例子。所以,若你们降低了方向,但想要它仍然和方向发生反应,你们可以使用反射率和镜面反射 此示例可能会有所帮助:@Radio谢谢您的提示!你能解释一下这会有什么帮助吗?