將位移貼圖應用於當前Three.js中的網格？

JSFiddle：http://jsfiddle.net/ma791nd8/1/將位移貼圖應用於當前Three.js中的網格？

我遇到了一些過時的教程和一些缺乏文檔的問題，所以我想我會問這裏。

看過他們的一個例子，我做了一個jsfiddle，並用更新的語法創建了一個克隆。然而，儘管我設置了myTexture.crossOrigin = ''，但我得到了一個cors問題。接下來的問題是我不知道爲什麼這一般不起作用。怎麼來的？

在這裏你可以看到原來的實例演示：https://github.com/meetar/three.js-displacement-map

我在的jsfiddle版本的變化：

// 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);

來源

2015-11-15 Asperger

考慮使用'MeshPhongMaterial'，它支持置換貼圖：http://threejs.org/examples/webgl_materials_displacementmap.html – WestLangley

@WestLangley我現在就來看看它。同時，如果你能展示一個最簡單的jsfiddle來展示如何只用移位工作，我將不勝感激。將會更簡單一些，並且易於可視化。當然只有如果你想：） – Asperger

@WestLangley在這裏它從來沒有提到位移圖作爲參數http://threejs.org/docs/#Reference/Materials/MeshPhongMaterial – Asperger

最新MeshPhongMaterial了置換貼圖內置，看到三這個簡單的例子.js文件R73：

var loader = new THREE.TextureLoader(); 
var myDisplacementMap = loader.load('somePath/someImage.jpg'); 

var material = new THREE.MeshPhongMaterial({ 
    color: 0xffffff, 
    //... 
    displacementMap: myDisplacementMap, 
    displacementScale: 10 
});

http://jsfiddle.net/cmn7z00b/

來源

2015-11-15 16:27:34

將位移貼圖應用於當前Three.js中的網格？

回答

相關問題