首页 > 解决方案 > 模糊three.js反射器对象

问题描述

我最近开始研究配置器工具,我需要在地面上有一个反射面来反射我们想要展示的对象并创建类似工作室的外观。

问题是 Three.js 有一个反射器版本,但它是 1:1 反射,而且它看起来很奇怪,因为它太反射了。问题是是否有人知道我怎样才能使反射的图像稍微模糊一些。我对着色器不是那么精通......

或者,如果有更好的方法,我愿意改变我的方法。我正在寻找获得与汽车展示柜类似的结果的最高效方式。图片供参考 https://comps.canstockphoto.com/3d-red-hot-rod-drawing_csp0608954.jpg

链接到我正在使用的文件。 https://github.com/mrdoob/three.js/blob/master/examples/jsm/objects/Reflector.js

以及我用来将其放置在场景中的代码:

        var mirrorGeometry = new THREE.CircleGeometry(200, 200);
        var groundMirror = new Reflector(mirrorGeometry, {
            clipBias: 0.05,
            textureWidth: window.innerWidth * window.devicePixelRatio,
            textureHeight: window.innerHeight * window.devicePixelRatio,
            color: 0x777777,
            recursion: 1
        });
        scene.add(groundMirror);

tl;dr:物体被放置在镜子上,产生相同的反射。对于展示模型来说,这看起来很奇怪。我正在询问有关如何模糊它的信息,但另一种方法也适用于我。

编辑:显然反射器对象也不能接收阴影(虽然我需要先研究一下。这也是最终渲染的一个因素)

标签: javascriptthree.js

解决方案


推荐阅读