javascript - Three.js - 在立方体上渲染阴影,但不在导入的 json 网格对象上渲染

标签 javascript 3d three.js shadow mesh

我试图让我的赛车在地板上投下阴影。阴影从立方体开始工作(立方体正在转换阴影),但赛车(导入的 json 网格对象)没有转换阴影。如何让赛车投下阴影?这与在 Material 上烘焙的 json 文件有关吗?代码 obj.castShadow = true; 实际上需要继续到 obj 的子级上吗?在这种情况下,哪个 child ?我在这里做错了什么?

Here's the json fileHere's a link to a demo

相关代码如下:

    var loader = new THREE.ObjectLoader();  
    loader.load("models/ferrari-f1-race-car.json", function (obj) {
        obj.castShadow = true;
        obj.scale.set(50,50,50);
        obj.position.x = 30;
        obj.rotation.y = Math.PI/1;
        scene.add (obj);
    });

    boxgeometry = new THREE.BoxGeometry(100, 100, 100);
    boxmaterial = new THREE.MeshLambertMaterial({
        color: 0x0aeedf
    });
    var cube = new THREE.Mesh(boxgeometry, boxmaterial);
    cube.castShadow = true;
    cube.position.x = -80;
    cube.position.y = 50;
    cube.position.z = 0;
    scene.add(cube);

    function createFloor(){ 
        floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(1000,500), new THREE.MeshBasicMaterial({color: 0x8594a2}));
        floor.rotation.x = -Math.PI/2;
        floor.position.y = -0;
        floor.castShadow = false;
        floor.receiveShadow = true;
        scene.add(floor);
    }

最佳答案

转换阴影成本高昂,并且在自定义对象上得不到很好的支持,经常出现错误。

最好的解决方案是在汽车下方的透明平面上绘制阴影纹理。如果您需要旋转汽车或灯光并需要精确的阴影,这可能会成为问题,因为纹理不会随 Angular 而变化。由作者使用技巧(旋转相机或使用有偏差的阴影)。这仍然可以提供很棒的渲染效果,请查看 http://helloracer.com/racer-s/和使用的简单图像:

shadow texture with bias to replace casted shadow

更令人印象深刻:

enter image description here

对于这个逼真的演示 http://www.littleworkshop.fr/renaultespace/

关于javascript - Three.js - 在立方体上渲染阴影,但不在导入的 json 网格对象上渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32063462/

相关文章:

javascript - jQuery jCarousel - 在水平视口(viewport)内对齐元素

python - "Tuple object is not callable"尝试使用 _offsets3d 更新 3d 散点图时

android - 为 Android 应用程序创建 3D 动画

javascript - 使用此 JavaScript 立方体函数在页面加载时放大立方体

javascript - 为什么我无法使用 "this"访问 js 函数中的变量

javascript - jQuery onClick 不适用于主要元素

r - 标准化色标,面板中的 persp() 图,R

三.js旋转定位几何体

javascript - 试图在旋转时将粒子对准相机并在三个 js 中相交时发出警告消息?

javascript - 根据另一个数组索引获取一个数组的值