<p dir="auto">Hi,</p>
<p dir="auto">I was wondering if the following was expected behavior.</p>
<p dir="auto">I have a MeshPhongMaterial which shows specular highlights appropriately on one side but not the other if I have a mesh that is doublesided = true.</p>
<p dir="auto">Is this expected or is it a lighting issue, or something else?</p>
<p dir="auto">Thanks</p>
<p dir="auto">Hi<br>
I was trying to set objects so that when the camera was inside them that they still have a color inside them.</p>
<p dir="auto">I found that setting the mesh to doubleSided when the object has a meshBasicMaterial works ok.</p>
<p dir="auto">The meshLambertMaterial looks way better than the MeshBasicMaterial from the outside though so I wanted to change to this material.<br>
However, when I do this, the inside of the object seems to go black.</p>
<p dir="auto">Is there a different setting i should change for the MeshLambertMaterial to get this to work?</p>
<p dir="auto">I have included some sample code below that causes the problems I am describing.</p>
<p dir="auto">regards<br>
Patrick</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var renderer, scene, projector, camera, stats;

window.onload = Initilise;
function Initilise()
{
    var container = $('#container');
    var width = container.width();
    var height = container.height();
    var viewAngle = 45;
    var aspect = width / height;
    var near = 1;
    var far = 100000;

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    container.append(renderer.domElement);

    //scene
    scene = new THREE.Scene();

    //camera
    camera = new THREE.Camera(  viewAngle,
                                aspect,
                                near,
                                far);

    camera.target.position.x = 200;
    camera.target.position.y = 200;
    camera.target.position.z = 200;
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 0;

    /***************Turn on the lights*****************/
    // create a point light
    pointLight = new THREE.PointLight( 0xFFFFFF );
    pointLight.position = camera.position.clone();
    scene.addLight(pointLight);

    if ( true )
    {
        stats = createStats();
        container.append( stats.domElement );
    }

    /******************Draw the scene******************/
    var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xff0000, wireframe: false});
    var geometry = new THREE.SphereGeometry( 10000, 30, 30 );
    var slice = new THREE.Mesh(geometry, sphereMaterial);
    slice.doubleSided = true;
    scene.addChild(slice);

    var sphereMaterial2 = new THREE.MeshLambertMaterial({color: 0x0000ff, wireframe: false});
    var geometry2 = new THREE.CylinderGeometry( 30, 50, 50, 50 );
    var slice2 = new THREE.Mesh(geometry2, sphereMaterial2);
    slice2.doubleSided = true;
    slice2.position.x = 200;
    slice2.position.y = 200;
    slice2.position.z = 200;
    scene.addChild(slice2);



    animate();
}

function animate()
{
    requestAnimationFrame( animate );
    render();
}
function render()
{
    renderer.render( scene, camera );
    stats.update();
}
function createStats()
{
    var stats;
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.left = '0px';
    stats.domElement.style.zIndex = 100;
    return stats;
}"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">renderer</span><span class="pl-kos">,</span> <span class="pl-s1">scene</span><span class="pl-kos">,</span> <span class="pl-s1">projector</span><span class="pl-kos">,</span> <span class="pl-s1">camera</span><span class="pl-kos">,</span> <span class="pl-s1">stats</span><span class="pl-kos">;</span>

<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">onload</span> <span class="pl-c1">=</span> <span class="pl-v">Initilise</span><span class="pl-kos">;</span>
<span class="pl-k">function</span> <span class="pl-v">Initilise</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">container</span> <span class="pl-c1">=</span> <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'#container'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">width</span> <span class="pl-c1">=</span> <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">width</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">height</span> <span class="pl-c1">=</span> <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">height</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">viewAngle</span> <span class="pl-c1">=</span> <span class="pl-c1">45</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">aspect</span> <span class="pl-c1">=</span> <span class="pl-s1">width</span> <span class="pl-c1">/</span> <span class="pl-s1">height</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">near</span> <span class="pl-c1">=</span> <span class="pl-c1">1</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">far</span> <span class="pl-c1">=</span> <span class="pl-c1">100000</span><span class="pl-kos">;</span>

    <span class="pl-s1">renderer</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">WebGLRenderer</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-en">setSize</span><span class="pl-kos">(</span><span class="pl-s1">width</span><span class="pl-kos">,</span> <span class="pl-s1">height</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">domElement</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-c">//scene</span>
    <span class="pl-s1">scene</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Scene</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-c">//camera</span>
    <span class="pl-s1">camera</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Camera</span><span class="pl-kos">(</span>  <span class="pl-s1">viewAngle</span><span class="pl-kos">,</span>
                                <span class="pl-s1">aspect</span><span class="pl-kos">,</span>
                                <span class="pl-s1">near</span><span class="pl-kos">,</span>
                                <span class="pl-s1">far</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">x</span> <span class="pl-c1">=</span> <span class="pl-c1">200</span><span class="pl-kos">;</span>
    <span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">y</span> <span class="pl-c1">=</span> <span class="pl-c1">200</span><span class="pl-kos">;</span>
    <span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">z</span> <span class="pl-c1">=</span> <span class="pl-c1">200</span><span class="pl-kos">;</span>
    <span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">x</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
    <span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">y</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
    <span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">z</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>

    <span class="pl-c">/***************Turn on the lights*****************/</span>
    <span class="pl-c">// create a point light</span>
    <span class="pl-s1">pointLight</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">PointLight</span><span class="pl-kos">(</span> <span class="pl-c1">0xFFFFFF</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">pointLight</span><span class="pl-kos">.</span><span class="pl-c1">position</span> <span class="pl-c1">=</span> <span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-en">clone</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">addLight</span><span class="pl-kos">(</span><span class="pl-s1">pointLight</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span> <span class="pl-c1">true</span> <span class="pl-kos">)</span>
    <span class="pl-kos">{</span>
        <span class="pl-s1">stats</span> <span class="pl-c1">=</span> <span class="pl-en">createStats</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-s1">container</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span> <span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-c1">domElement</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-c">/******************Draw the scene******************/</span>
    <span class="pl-k">var</span> <span class="pl-s1">sphereMaterial</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshLambertMaterial</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">color</span>: <span class="pl-c1">0xff0000</span><span class="pl-kos">,</span> <span class="pl-c1">wireframe</span>: <span class="pl-c1">false</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">geometry</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">SphereGeometry</span><span class="pl-kos">(</span> <span class="pl-c1">10000</span><span class="pl-kos">,</span> <span class="pl-c1">30</span><span class="pl-kos">,</span> <span class="pl-c1">30</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">slice</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">(</span><span class="pl-s1">geometry</span><span class="pl-kos">,</span> <span class="pl-s1">sphereMaterial</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">slice</span><span class="pl-kos">.</span><span class="pl-c1">doubleSided</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
    <span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">addChild</span><span class="pl-kos">(</span><span class="pl-s1">slice</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">sphereMaterial2</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshLambertMaterial</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">color</span>: <span class="pl-c1">0x0000ff</span><span class="pl-kos">,</span> <span class="pl-c1">wireframe</span>: <span class="pl-c1">false</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">geometry2</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">CylinderGeometry</span><span class="pl-kos">(</span> <span class="pl-c1">30</span><span class="pl-kos">,</span> <span class="pl-c1">50</span><span class="pl-kos">,</span> <span class="pl-c1">50</span><span class="pl-kos">,</span> <span class="pl-c1">50</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">slice2</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">(</span><span class="pl-s1">geometry2</span><span class="pl-kos">,</span> <span class="pl-s1">sphereMaterial2</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">slice2</span><span class="pl-kos">.</span><span class="pl-c1">doubleSided</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
    <span class="pl-s1">slice2</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">x</span> <span class="pl-c1">=</span> <span class="pl-c1">200</span><span class="pl-kos">;</span>
    <span class="pl-s1">slice2</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">y</span> <span class="pl-c1">=</span> <span class="pl-c1">200</span><span class="pl-kos">;</span>
    <span class="pl-s1">slice2</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">z</span> <span class="pl-c1">=</span> <span class="pl-c1">200</span><span class="pl-kos">;</span>
    <span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">addChild</span><span class="pl-kos">(</span><span class="pl-s1">slice2</span><span class="pl-kos">)</span><span class="pl-kos">;</span>



    <span class="pl-en">animate</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">animate</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">{</span>
    <span class="pl-en">requestAnimationFrame</span><span class="pl-kos">(</span> <span class="pl-s1">animate</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">{</span>
    <span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span> <span class="pl-s1">scene</span><span class="pl-kos">,</span> <span class="pl-s1">camera</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-en">update</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">createStats</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">stats</span><span class="pl-kos">;</span>
    <span class="pl-s1">stats</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Stats</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-c1">domElement</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">.</span><span class="pl-c1">position</span> <span class="pl-c1">=</span> <span class="pl-s">'absolute'</span><span class="pl-kos">;</span>
    <span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-c1">domElement</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">.</span><span class="pl-c1">top</span> <span class="pl-c1">=</span> <span class="pl-s">'0px'</span><span class="pl-kos">;</span>
    <span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-c1">domElement</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">.</span><span class="pl-c1">left</span> <span class="pl-c1">=</span> <span class="pl-s">'0px'</span><span class="pl-kos">;</span>
    <span class="pl-s1">stats</span><span class="pl-kos">.</span><span class="pl-c1">domElement</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">.</span><span class="pl-c1">zIndex</span> <span class="pl-c1">=</span> <span class="pl-c1">100</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">stats</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>