<p dir="auto">The refractionRatio has no effect on MeshPhysicalMaterial</p>
<p dir="auto">In threejs example  <a href="https://threejs.org/examples/?q=refract#webgl_materials_cubemap_refraction" rel="nofollow">https://threejs.org/examples/?q=refract#webgl_materials_cubemap_refraction</a></p>
<p dir="auto">replace line 81,82 and 83 with the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var cubeMaterial3 = new THREE.MeshPhysicalMaterial( {color: 0xccddff,envMap: textureCube, refractionRatio: 0.90,reflectivity: 0.1,transparent : true,opacity : 0.2,} );
var cubeMaterial2 = new THREE.MeshPhysicalMaterial( { color: 0xccfffd, envMap: textureCube, refractionRatio: 0.985, transparent : true,opacity : 0.2 } );
var cubeMaterial1 = new THREE.MeshPhongMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.98 } );"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">cubeMaterial3</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">MeshPhysicalMaterial</span><span class="pl-kos">(</span> <span class="pl-kos">{</span><span class="pl-c1">color</span>: <span class="pl-c1">0xccddff</span><span class="pl-kos">,</span><span class="pl-c1">envMap</span>: <span class="pl-s1">textureCube</span><span class="pl-kos">,</span> <span class="pl-c1">refractionRatio</span>: <span class="pl-c1">0.90</span><span class="pl-kos">,</span><span class="pl-c1">reflectivity</span>: <span class="pl-c1">0.1</span><span class="pl-kos">,</span><span class="pl-c1">transparent</span> : <span class="pl-c1">true</span><span class="pl-kos">,</span><span class="pl-c1">opacity</span> : <span class="pl-c1">0.2</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">var</span> <span class="pl-s1">cubeMaterial2</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">MeshPhysicalMaterial</span><span class="pl-kos">(</span> <span class="pl-kos">{</span> <span class="pl-c1">color</span>: <span class="pl-c1">0xccfffd</span><span class="pl-kos">,</span> <span class="pl-c1">envMap</span>: <span class="pl-s1">textureCube</span><span class="pl-kos">,</span> <span class="pl-c1">refractionRatio</span>: <span class="pl-c1">0.985</span><span class="pl-kos">,</span> <span class="pl-c1">transparent</span> : <span class="pl-c1">true</span><span class="pl-kos">,</span><span class="pl-c1">opacity</span> : <span class="pl-c1">0.2</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">cubeMaterial1</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">MeshPhongMaterial</span><span class="pl-kos">(</span> <span class="pl-kos">{</span> <span class="pl-c1">color</span>: <span class="pl-c1">0xffffff</span><span class="pl-kos">,</span> <span class="pl-c1">envMap</span>: <span class="pl-s1">textureCube</span><span class="pl-kos">,</span> <span class="pl-c1">refractionRatio</span>: <span class="pl-c1">0.98</span> <span class="pl-kos">}</span> <span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and you will see only the middle model showing refraction effect:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24234466/70343309-fb56c300-187c-11ea-9106-b33e9faa99f1.PNG"><img src="https://user-images.githubusercontent.com/24234466/70343309-fb56c300-187c-11ea-9106-b33e9faa99f1.PNG" alt="Capture" style="max-width: 100%;"></a></p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li>[x ] r111</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">In the webgl_materials_cubemap_refraction example, I tried to change the materials from MeshPhong to MeshStandard, and the refraction effect was gone (the statue on the left still uses the MeshPhongMaterial, the other two use a MeshStandardMaterial):</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/6480367/40549196-1e45ba9c-6037-11e8-95b5-6194876c35f7.png"><img width="1177" alt="screen shot 2018-05-25 at 16 16 35" src="https://user-images.githubusercontent.com/6480367/40549196-1e45ba9c-6037-11e8-95b5-6194876c35f7.png" style="max-width: 100%;"></a></p>
<p dir="auto">Is there something I am missing to enable refraction? from the documentation, it doesn't look so.</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r92</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Safari</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> macOS</li>
</ul>