js使用背景材料

Question

我的目标是将3D对象合成到全景图上。我已经得到了对象，并以正确的视角将它们排成一行。我需要的是一种方法来实现一个useBackground着色器，你看到的软件，如Maya和Max到three.js。

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

Answer 1

three.js的蒙皮示例使用了这样的阴影。确保物体的castShadow属性设置为true，并且灯光位于正确的位置。http://threejs.org/examples/webgl_animation_skinning_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;

Answer 2

好的，我从互联网上找到了解决方案:p。我必须创建一个着色器，其中我将shadowColor从GL_FragColor的alpha中减去

是片段着色器的代码。你可以从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")