Javascript 将置换贴图应用于当前Three.js中的网格?
JSFiddle: 我有一些过时的教程和一些缺乏文档的问题,所以我想我会在这里问 在查看了他们的一个示例后,我制作了一个JSFIDLE,并使用较新的语法创建了一个克隆。然而,即使我设置了Javascript 将置换贴图应用于当前Three.js中的网格?,javascript,three.js,Javascript,Three.js,JSFiddle: 我有一些过时的教程和一些缺乏文档的问题,所以我想我会在这里问 在查看了他们的一个示例后,我制作了一个JSFIDLE,并使用较新的语法创建了一个克隆。然而,即使我设置了myTexture.crossOrigin='',我也会遇到cors问题。下一个问题是,我不知道为什么这通常不起作用。为什么 在这里,您可以看到原始示例的演示: 我在JSFIDLE版本中的更改: // scene setup var renderer = new THREE.WebGLRender
myTexture.crossOrigin='',我也会遇到cors问题。下一个问题是,我不知道为什么这通常不起作用。为什么
在这里,您可以看到原始示例的演示:
我在JSFIDLE版本中的更改:
// 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 );
最新的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
} );
考虑使用支持置换贴图的MeshPhongMaterial
:@WestLangley我现在就来看看。同时,如果您能展示一个最小的jsfiddle,展示它如何仅在位移情况下工作,我将不胜感激。会更精简,更容易想象。当然,只有当你想:)@WestLangley这里它从来没有提到位移贴图作为参数@WestLangley它只得到凹凸贴图和法线贴图,但就是这样。所以我很惊讶你给我看的例子能起作用