Question

JSFiddle：http://jsfiddle.net/ma791nd8/1/

我遇到过时教程和一些文档缺乏的问题所以我想我会问这里。

看了他们的一个例子后，我创建了一个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 );

Answer 1

最新的MeshPhongMaterial内置置换贴图，请参阅Three.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/

将置换贴图应用于当前Three.js中的网格？

1 个答案: