THREE.js使用背景材料

Question

我的目标是将3D物体组合到全景图上。我已经把物体放进去了，用正确的角度把它们排列得很好。我需要的是一种实现useBackground着色器的方法，您可以在软件中看到，比如Maya和Max到three.js。

更清楚的是，我想把阴影投射到我创建的代理平台上。地面不应该是可见的，但上投下的阴影应该是可见的。如果你能帮我或者引导我走向正确的方向。我是否需要创建一个自定义着色器，还是已经有一种方式只渲染阴影上的对象。

Answer 1

好的，我从互联网上找到了解决方案:P.我必须创建一个着色器，其中我的shadowColor从GL_FragColor的阿尔法中减去

这是片段着色器的代码。您可以使用BasicMaterial中的顶点着色器。

planeFragmentShader = [

            "uniform vec3 diffuse;",
            "uniform float opacity;",

            THREE.ShaderChunk["color_pars_fragment"],
            THREE.ShaderChunk["map_pars_fragment"],
            THREE.ShaderChunk["lightmap_pars_fragment"],
            THREE.ShaderChunk["envmap_pars_fragment"],
            THREE.ShaderChunk["fog_pars_fragment"],
            THREE.ShaderChunk["shadowmap_pars_fragment"],
            THREE.ShaderChunk["specularmap_pars_fragment"],

            "void main() {",

            "gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );",

            THREE.ShaderChunk["map_fragment"],
            THREE.ShaderChunk["alphatest_fragment"],
            THREE.ShaderChunk["specularmap_fragment"],
            THREE.ShaderChunk["lightmap_fragment"],
            THREE.ShaderChunk["color_fragment"],
            THREE.ShaderChunk["envmap_fragment"],
            THREE.ShaderChunk["shadowmap_fragment"],
            THREE.ShaderChunk["linear_to_gamma_fragment"],
            THREE.ShaderChunk["fog_fragment"],

            "gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 - shadowColor.x );",

            "}"
        ].join("\n")

Answer 2

three.js皮肤示例使用这样的阴影。确保对象的castShadow属性设置为true，并且灯在正确的位置。morph.html

// GROUND

var groundMaterial = new THREE.MeshPhongMaterial( { emissive: 0xbbbbbb } );
var planeGeometry = new THREE.PlaneGeometry( 16000, 16000 );

var ground = new THREE.Mesh( planeGeometry, groundMaterial );
ground.position.set( 0, FLOOR, 0 );
ground.rotation.x = -Math.PI/2;
scene.add( ground );

ground.receiveShadow = true;