Apply a displacement map to a mesh in the current Three.js?


Staff member
JSFiddle: <a href="" rel="nofollow"></a>

I am having some issues with outdated tutorials and some lack of documentation so I thought I would ask here.

Having looked at one of their examples I made a jsfiddle and created a clone with the newer syntax. However, I am getting a cors issue eventhough I set up
myTexture.crossOrigin = ''
The next problem is I have no idea why this is not working in general. How come?

Here you can see a demo of the original example: <a href="" rel="nofollow"></a>

My changes in the JSFiddle version:

    // scene setup
    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(document.body.clientWidth, document.body.clientHeight);
    var scene = new THREE.Scene();
    // CAMERA

    var fov = 45; // camera field-of-view in degrees
    var width = renderer.domElement.width;
    var height = renderer.domElement.height;
    var aspect = width / height; // view aspect ratio
    var camera = new THREE.PerspectiveCamera( fov, aspect );
    camera.position.z = -200;
    camera.position.y = -400;
    // LIGHTS
    ambientLight = new THREE.AmbientLight( 0xffffff );
    scene.add( ambientLight );
    // SHADERS
planeMesh = new THREE.Group();

var myTexture = new THREE.TextureLoader();
myTexture.crossOrigin = '';
    function (myTexture) {
    var shader = THREE.ShaderLib[ "normalmap" ];
    var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
    uniforms[ "enableDisplacement" ].value = true;
    uniforms[ "enableDiffuse" ].value = true;
    uniforms[ "tDisplacement" ].value = myTexture;
    uniforms[ "tDiffuse" ].value = myTexture;
    uniforms[ "uDisplacementScale" ].value = 50;
    var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, wireframe: true };
    var material = new THREE.ShaderMaterial( parameters );

    var plane = new THREE.Mesh( geometry, material);

    planeMesh.rotation.y = Math.PI;

    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    requestAnimationFrame( animate );