今日、three.js で初めてのスカイボックスを構築する実験を行っています。私は多くのチュートリアルを読みましたが、最終的なコードはこれに基づいています : http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/画像を最初にロードできるようにし、使用している three.js のバージョンと互換性を持たせるために、いくつかの変更を加えます。
現在のポイントに到達するために多くの小さな問題を克服しましたが、非常に一生懸命検索したにもかかわらず、現在の問題に対する答えが見つかりません。私の問題は、インターネットからダウンロードした専用のスカイボックス テクスチャを使用しているにもかかわらず、私のスカイボックスが角と縁のある立方体であることは明らかです。テクスチャはひどく歪んでいるように見え、まったく説得力がありません。
これは私のスカイボックスがどのように見えるかのスクリーンショットです:
画像をダウンロードしたサイトへのリンクは次の とおりです: http://www.humus.name/index.php?page=Cubemap&item=Yokohama3
ダウンロードしたいくつかの異なるテクスチャでこれを試してみましたが、毎回立方体の内部を見ていることが非常に明白です。
これが私のコードです（スカイボックスを作成するセクションだけでなく、すべてのコードを含めています）：
var scene;
var camera;
var renderer;
function createRenderer () {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMapEnabled = true;
//renderer.shadowCameraNear = 0.5;
//renderer.shadowCameraFar = 500;
}
function createCamera () {
camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
0.1, 1000
);
camera.position.x = 50;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(scene.position);
}
function createPlane () {
var material = new THREE.MeshLambertMaterial({
color: 0xcccccc,
})
var geometry = new THREE.PlaneGeometry(40, 40)
var plane = new THREE.Mesh(geometry, material)
plane.receiveShadow = true;
plane.rotation.x = -Math.PI/2
plane.position.y = -6;
scene.add(plane)
}
function createLight () {
var spotLight = new THREE.DirectionalLight(0xffffff);
spotLight.position.set( 0, 50, 20 );
spotLight.shadowCameraVisible = true;
spotLight.shadowDarkness = 0.5
spotLight.shadowCameraNear = 0;
spotLight.shadowCameraFar = 100;
spotLight.shadowCameraLeft = -50;
spotLight.shadowCameraRight = 50;
spotLight.shadowCameraTop = 50;
spotLight.shadowCameraBottom = -50;
spotLight.castShadow = true;
scene.add(spotLight);
}
function createSkyboxAndSphere () {
var urlPrefix = "Yokohama3/";
var urls = [ urlPrefix + "posx.jpg", urlPrefix + "negx.jpg",
urlPrefix + "posy.jpg", urlPrefix + "negy.jpg",
urlPrefix + "posz.jpg", urlPrefix + "negz.jpg" ];
var textureCube = THREE.ImageUtils.loadTextureCube( urls , undefined, function () {;
var shader = THREE.ShaderLib["cube"];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
shader.uniforms['tCube'].value = textureCube; // textureCube has been init before
var material = new THREE.ShaderMaterial({
fragmentShader : shader.fragmentShader,
vertexShader : shader.vertexShader,
uniforms : shader.uniforms,
depthWrite : false,
side: THREE.BackSide,
});
var geometry = new THREE.BoxGeometry(100, 100, 100)
var skybox = new THREE.Mesh(geometry, material)
scene.add(skybox)
var material = new THREE.MeshPhongMaterial({
color: "red",
envMap: textureCube,
reflectivity: 0.3,
})
var geometry = new THREE.SphereGeometry(6, 30, 15)
var sphere = new THREE.Mesh(geometry, material)
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add(sphere)
});
}
function init () {
scene = new THREE.Scene();
createRenderer();
createCamera();
createLight();
createPlane ();
createSkyboxAndSphere ();
document.getElementById("container").appendChild(renderer.domElement)
render ()
}
function render () {
renderer.render(scene, camera)
requestAnimationFrame(render);
}
window.onload = function () {
init ();
}
私は、キューブマッピングとスカイボックスがどのように機能するかについて根本的に誤解していると思われます.特にこれとJavaScript全般に非常に慣れておらず、知識に大きなギャップがあることを認識しています.
これに対する答えが明白である場合、および/または以前に質問されたことがある場合は、申し訳ありません。あなたの助けに感謝します!