Normal map seams
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
JavaScript
let camera, scene, renderer, mesh;
init();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 4;
scene = new THREE.Scene();
new THREE.TextureLoader().load('https://i.imgur.com/KcXOMBv.png', (texture) => {
const material = new THREE.MeshPhongMaterial({
color: 0xffffff,
normalMap: texture,
shininess: 1,
normalScale: new THREE.Vector2(1, 1),
});
material.onBeforeCompile = shader => {
shader.fragmentShader = shader.fragmentShader.replace(/}$/gm, `
gl_FragColor = vec4(normalize(normal),1.);
vec3 _a = gl_FragColor.xyz;
//_a= _a*3.-1.; //uncomment this to boost the problem
gl_FragColor.xyz = _a;
}`)
}
// Create a box geom and turn it into a sphere
const geometry = new THREE.BoxBufferGeometry(1, 1, 1, 8, 8, 8);
const vertices = geometry.attributes.position;
const normals = geometry.attributes.normal;
const radius = 1;
for (let i = 0; i < vertices.count; i ++) {
const v = new THREE.Vector3().fromArray(vertices.array, i * 3);
v.normalize();
normals.setXYZ(i, v.x, v.y, v.z);
v.setLength(radius);
vertices.setXYZ(i, v.x, v.y, v.z);
}
//vertices.needsUpdate = true;
//normals.needsUpdate = true;
// Assign our normals map to all sides
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
scene.add(new THREE.AxesHelper(2));
// Add a light
const light = new THREE.DirectionalLight(0xfffffc, 0.5);
light.position.set(3, 3, 3);
light.target = mesh;
scene.add(light);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
animate();
});
}
function animate() {
requestAnimationFrame(animate);
/* mesh.rotation.y...