Question

我将带有发光效果的json模型添加到场景中。

如下：

我尝试自动旋转json模型。但是，旋转时看起来很奇怪。模型的发光效果不起作用。

我认为当这个模型旋转时，json模型的位置不会改变。因此，当此模型旋转时，ShaderMaterial的viewVector.value是常量（我不会更改相机的位置）。

if(jsonMesh){
    jsonMesh.rotation.y += 0.1;
    jsonMesh.material.uniforms.viewVector.value =
        new THREE.Vector3().subVectors( camera.position, jsonMesh.position );

}

这是Three.ShaderMaterial。

VertexShader和FragmentShader

<script id="vertexShader" type="x-shader/x-vertex">
    uniform vec3 viewVector;
    uniform float c;
    uniform float p;
    varying float intensity;
    void main()
    {
        vec3 vNormal = normalize( normalMatrix * normal );
        vec3 vNormel = normalize( normalMatrix * viewVector );
        intensity = pow( c - dot(vNormal, vNormel), p );

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment"> 
    uniform vec3 glowColor;
    varying float intensity;
    void main() 
    {
        vec3 glow = glowColor * intensity;
        gl_FragColor = vec4( glow, 1.0 );
    }
</script>

Three.ShaderMaterial。

var customMaterial = new THREE.ShaderMaterial( 
{
    uniforms: 
    { 
        "c":   { type: "f", value: 1.0 },
        "p":   { type: "f", value: 1.4 },
        glowColor: { type: "c", value: new THREE.Color(0xffff00) },
        viewVector: { type: "v3", value: camera.position }
    },
    vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
    side: THREE.FrontSide,
    blending: THREE.AdditiveBlending,
    transparent: true
}
);

在这种情况下我应该如何修改代码？这是Demo和source code。

Answer 1

您可以使用内置的three.js函数。我没有使用相机位置，而是选择向您展示如何在世界中设置光源位置。这样，您可以将自定义着色器上的光源与计划稍后添加到3d世界的任何光源相匹配。随意将worldLightPoint值更改为camera.position而不是新的THREE.Vector3（100,100,100）。在这种情况下，相机位置的效果将保持不变。

Color stc{Graph_lib::Color::Color_type::red};

如何保持在three.js场景中旋转的json模型的发光效果？

1 个答案: