如何在three.js中使用gltf模型投射阴影?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在three.js中使用gltf模型投射阴影?相关的知识,希望对你有一定的参考价值。
嘿,我是三个js的新手,并想知道如何用gltf模型投下阴影?我可以看到它有可能因为它工作here我假设我没有正确构建我的代码 -
var model = new THREE.GLTFLoader();
model.load('https://threejs.org/examples/models/gltf/Duck/glTF/Duck.gltf', function(gltf) {scene.add(gltf.scene);});
model.castShadow = true;
这是小提琴https://jsfiddle.net/steveham/ckpfwy24/87/
干杯!
答案
您需要在每个子网格上设置castShadow = true
,如下所示:
var loader = new THREE.GLTFLoader();
loader.load( 'https://threejs.org/examples/models/gltf/Duck/glTF/Duck.gltf', function( gltf ) {
gltf.scene.traverse( function( node ) {
if ( node instanceof THREE.Mesh ) { node.castShadow = true; }
} );
scene.add( gltf.scene );
} );
three.js r.91
另一答案
var loader = new THREE.GLTFLoader();
loader.load( 'file path/gltf.gltf', function ( gltf ) {
gltf.scene.traverse( function ( node ) {
if ( node.isMesh || node.isLight ) node.castShadow = true;
if ( node.isMesh || node.isLight ) node.receiveShadow = true;
} );
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.envMap = envMap; //reflection of the world
}
} );
scene.add( gltf.scene );
以上是关于如何在three.js中使用gltf模型投射阴影?的主要内容,如果未能解决你的问题,请参考以下文章
Three.js 完全冻结 Chrome,GLTF 模型中的巨大纹理
使用Three.js 心得系列一 如何创建三维网格三使用Three.js 心得系列三 Three.js 如何加载GlTF文件