Learning THREE.js has been quite challenging for me, especially when trying to display a simple skybox. Despite attempting various strategies, I have not been successful due to insufficient documentation and multiple releases. This struggle has left me feeling overwhelmed and frustrated.
I initially suspected that the issue might be related to image loading times, so I tried implementing some loader code without much success. However, I acknowledge that there may be a correct way to do it that I am missing, as finding examples that are compatible with the current release has proven difficult.
<html>
<head> <title>Skybox Demo</title> <style>canvas { width: 100%; height: 100% }</style>
<body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
<script>
var container;
var renderer;
var cameraCube, sceneCube;
var skyboxMesh;
var cubeTarget;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
sceneCube = new THREE.Scene();
// Load cube textures
var path = "textures/cube/";
var format = '.jpg';
var urls = [ path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format ];
var skyCubeTexture = THREE.ImageUtils.loadTextureCube(urls);
skyCubeTexture.format = THREE.RGBFormat;
// Cube shader
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = skyCubeTexture;
var material = new THREE.ShaderMaterial({
fragmentShader : shader.fragmentShader,
vertexShader : shader.vertexShader,
uniforms : shader.uniforms,
depthWrite : false,
side : THREE.BackSide
});
var skyboxMesh = new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), material);
sceneCube.add(skyboxMesh);
// Renderer
renderer = new THREE.WebGLRenderer( {antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
container.appendChild( renderer.domElement );
}
function animate() {
render();
requestAnimationFrame( animate );
}
function render() {
var timer = - new Date().getTime() * 0.0002;
cameraCube.position.x = 10 * Math.cos( timer );
cameraCube.position.z = 10 * Math.sin( timer );
cameraCube.lookAt({x:0, y:0, z:0});
renderer.clear();
renderer.render(sceneCube, cameraCube);
}
</script>
</body>
</html>