<p dir="auto">I was just installing Three through npm and noticed that the code snippet and the JS fiddle at the end of the page is using THREE.CanvasRenderer. <a href="https://www.npmjs.com/package/three" rel="nofollow">https://www.npmjs.com/package/three</a></p>
<p dir="auto">You'll see this warning in the console:<br>
<code class="notranslate">"THREE.CanvasRenderer has been moved to /examples/js/renderers/CanvasRenderer.js"</code></p>
<p dir="auto">It should probably be updated to use:  <code class="notranslate">renderer = new THREE.WebGLRenderer();</code><br>
Fixed fiddle: <a href="https://jsfiddle.net/9sp1hqvb/" rel="nofollow">https://jsfiddle.net/9sp1hqvb/</a></p>
<p dir="auto">The script on the page should also have that fix:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;script&gt;

    var camera, scene, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim 
        requestAnimationFrame( animate );

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

&lt;/script&gt; "><pre class="notranslate"><code class="notranslate">&lt;script&gt;

    var camera, scene, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim 
        requestAnimationFrame( animate );

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

&lt;/script&gt; 
</code></pre></div>
<p dir="auto">If you're installing for the first time, this would be super confusing.</p>
<p dir="auto">Sorry if this issue is a duplicate. I searched but didn't find anything about this.</p>
<p dir="auto">Hi,</p>
<p dir="auto">First thank you for your amazing work. I am stunned by what that library can do!<br>
I am using three.js with a dae on an ipad.<br>
Now what i want to do is</p>
<ul dir="auto">
<li>select an object with touch</li>
<li>make all other objects' opacity to 0.2 and the selected to 1.0<br>
This would make it clear what object you selected.</li>
</ul>
<p dir="auto">Now my problem is that the same material is shared by almost all objects in the dae. So applying opacity to one object's material will actually apply it to almost all objects in the dae.</p>
<p dir="auto">So my idea was to use traverseHierarchy on dae loading and do something like<br>
object.material = object.material.clone()</p>
<p dir="auto">But that doesnt work. So my question is how can i clone a material?<br>
Or may be there is another way of doing what i want ...</p>
<p dir="auto">Thank you</p>