0
我一直在尋找很多方法來創建一個使用單個圖像作爲紋理貼圖的天空盒。單個圖像天空盒問題
我找到了一張UV貼圖教程，但結果在盒子裏的正Y和負Y平面的邊緣產生了黑線，如here和here所示。
我的問題是：什麼可能導致這些背線？這是僅使用單幅圖像創建天空盒的最佳方式嗎？
這裏是我的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Using an skybox!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"> </script>
<style>
body {margin:0; overflow:hidden}
canvas {width:100%; height:100%}
</style>
</head>
<body>
<div id="threejs"></div>
<script>
var scene, renderer;
var camera, controls;
var width, height;
var light, ambient;
var cube;
init();
function init() {
width = window.innerWidth;
height = window.innerHeight;
loadScene();
loadMeshes();
loadLights();
render();
};
function loadScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 2000);
camera.position.z = 15;
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width, height);
renderer.setClearColor(0xdfdfdf);
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
document.getElementById("threejs").appendChild(renderer.domElement);
controls = new THREE.TrackballControls(camera, renderer.domElement);
};
function loadMeshes(){
var boxMap = new THREE.TextureLoader().load('skybox3.jpg');
var material = new THREE.MeshPhongMaterial({
map: boxMap,
side: THREE.BackSide
});
var posx = [new THREE.Vector2(0.5, .666), new THREE.Vector2(0.5, .333),
new THREE.Vector2(0.75, .333), new THREE.Vector2(0.75, .666)];
var negx = [new THREE.Vector2(0, .666), new THREE.Vector2(0, .333),
new THREE.Vector2(0.25, .333), new THREE.Vector2(0.25, .666)];
var posz = [new THREE.Vector2(0.25, .666), new THREE.Vector2(0.25, .333),
new THREE.Vector2(0.5, .333), new THREE.Vector2(0.5, .666)];
var negz = [new THREE.Vector2(0.75, .666), new THREE.Vector2(0.75, .333),
new THREE.Vector2(1 , .333), new THREE.Vector2(1, .666)];
var posy = [new THREE.Vector2(0.25, 1), new THREE.Vector2(0.25, .666),
new THREE.Vector2(0.5, .666), new THREE.Vector2(0.5, 1)];
var negy = [new THREE.Vector2(0.25, .333), new THREE.Vector2(0.25, 0),
new THREE.Vector2(0.5, 0), new THREE.Vector2(0.5, .333)];
var cubeGeometry = new THREE.BoxGeometry(1000, 1000, 1000);
cubeGeometry.faceVertexUvs[0] = [];
cubeGeometry.faceVertexUvs[0][0] = [ posx[0], posx[1], posx[3]];
cubeGeometry.faceVertexUvs[0][1] = [ posx[1], posx[2], posx[3]];
cubeGeometry.faceVertexUvs[0][2] = [ negx[0], negx[1], negx[3]];
cubeGeometry.faceVertexUvs[0][3] = [ negx[1], negx[2], negx[3]];
cubeGeometry.faceVertexUvs[0][4] = [ posy[0], posy[1], posy[3]];
cubeGeometry.faceVertexUvs[0][5] = [ posy[1], posy[2], posy[3]];
cubeGeometry.faceVertexUvs[0][6] = [ negy[0], negy[1], negy[3]];
cubeGeometry.faceVertexUvs[0][7] = [ negy[1], negy[2], negy[3]];
cubeGeometry.faceVertexUvs[0][8] = [ posz[0], posz[1], posz[3]];
cubeGeometry.faceVertexUvs[0][9] = [ posz[1], posz[2], posz[3]];
cubeGeometry.faceVertexUvs[0][10] = [ negz[0], negz[1], negz[3]];
cubeGeometry.faceVertexUvs[0][11] = [ negz[1], negz[2], negz[3]];
cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);
};
function loadLights() {
ambient = new THREE.AmbientLight(0xbbbbbb);
light = new THREE.SpotLight(0x5555555);
light.castShadow = true;
light.shadowCameraNear = 8;
light.shadowCameraFar = 400;
light.shadowDarkness = 1;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
light.position.set(8, 15, 15);
scene.add(ambient);
scene.add(light);
};
function render() {
requestAnimationFrame(render);
controls.update();
renderer.render(scene, camera);
};
window.addEventListener("resize", function() {
width = window.innerWidth;
height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
});
</script>
http://stackoverflow.com/a/35119455/4168648 –