Search code examples
reflectionthree.jstexturesopacity

Is it possible to combine a reflection (using cubemap) with a material on Three.js?


If I have an object in three.js which has a texture applied to it (a colourful texture), for example a car - how can I add a partial reflection to the surface, so that the final material is say, the combination of a shiny red metal and the reflection of the scene?

I am familiar with creating reflections using an additional camera and cube mapping, but I am not sure how to combine this with an objects existing material.

An example of the reflection method I am using can be found here:

https://github.com/mrdoob/three.js/commit/4d1dd95d62ff48b1842bf4e3fe0c393f5bd6f4d6#commitcomment-1832509

If it is possible to combine the materials, is it possible to control the opacity of each part (the original material vs the reflection) to control how 'reflective' a surface is?

Many thanks


Solution

  • Yes, but it is the reflectivity, not the opacity that controls how reflective the surface is.

    See this example: http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap.html

    EDIT: This example does not show a texture applied to the material, but in the example above, that can be added like so:

    var texture = THREE.ImageUtils.loadTexture( 'texture.jpg' );
    
    var cubeMaterial1 = new THREE.MeshLambertMaterial( {
        color: 0xffffff,
        ambient: 0xffffff,
        map: texture,
        envMap: reflectionCube
    } );
    

    (Side note, cubeMaterial1 in the example is the material applied to the mesh -- in spite of the unusual choice for the variable name.)