JSFiddle: <a href="http://jsfiddle.net/ma791nd8/1/" rel="nofollow">http://jsfiddle.net/ma791nd8/1/</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
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="https://github.com/meetar/three.js-displacement-map" rel="nofollow">https://github.com/meetar/three.js-displacement-map</a>
My changes in the JSFiddle version:
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
Code:
myTexture.crossOrigin = ''
Here you can see a demo of the original example: <a href="https://github.com/meetar/three.js-displacement-map" rel="nofollow">https://github.com/meetar/three.js-displacement-map</a>
My changes in the JSFiddle version:
Code:
// scene setup
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(document.body.clientWidth, document.body.clientHeight);
document.body.appendChild(renderer.domElement);
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;
camera.lookAt(scene.position);
// LIGHTS
ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );
// SHADERS
planeMesh = new THREE.Group();
var myTexture = new THREE.TextureLoader();
myTexture.crossOrigin = '';
myTexture.load('https://leveldev.files.wordpress.com/2012/12/heightmap.jpeg',
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.add(plane)
}
);
planeMesh.rotation.y = Math.PI;
scene.add(planeMesh);
// FUNCTIONS
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
requestAnimationFrame( animate );