How to use the CubeTextureLoader function from three
Find comprehensive JavaScript three.CubeTextureLoader code examples handpicked from public code repositorys.
three.CubeTextureLoader is a class in the Three.js library that loads a cube texture, which is a six-sided texture used for environmental mapping or reflection mapping in 3D graphics.
173 174 175 176 177 178 179 180 181var urls = [ image_base_path + "posx.jpg", image_base_path + "negx.jpg", image_base_path + "posy.jpg", image_base_path + "negy.jpg", image_base_path + "posz.jpg", image_base_path + "negz.jpg" ]; textureCube = new THREE.CubeTextureLoader().load( urls ); textureCube.format = THREE.RGBFormat; textureCube.mapping = THREE.CubeReflectionMapping; textureCube.encoding = THREE.sRGBEncoding;
75
0
1
172 173 174 175 176 177 178 179 180 181var sunlight = new THREE.DirectionalLight( 0xffffff, 1 ) sunlight.position.set(50, 100, 300); // Approximate vector towards sun in background image scene.add( sunlight ); // Textures const loader = new THREE.CubeTextureLoader(); const textureCube = loader.load([ image_base_path + 'posx.jpg', image_base_path + 'negx.jpg', image_base_path + 'posy.jpg',
7500How does three.CubeTextureLoader work?
three.CubeTextureLoader is a class in the Three.js library that loads a cube texture, which is a six-sided texture used for environmental mapping or reflection mapping in 3D graphics. When you create an instance of the CubeTextureLoader class and call its load method with the URLs of the six images that make up the cube texture, the class fetches the six images and combines them into a cube texture. The class then returns the cube texture as a THREE.CubeTexture object. You can use the resulting THREE.CubeTexture object in your Three.js application to create reflective or environment mapped materials, which add visual interest and realism to 3D scenes. In addition to loading cube textures, CubeTextureLoader also supports loading HDR (High Dynamic Range) cube textures, which provide higher color accuracy and greater brightness range than traditional textures. In summary, CubeTextureLoader provides a simple and flexible way to load cube textures in Three.js applications, allowing you to create more realistic and visually interesting 3D scenes.
23 24 25 26 27 28 29 30 31 32// set skybox background var loader = new THREE.CubeTextureLoader(); var urlPrefix = '/images/skymap/'; var skymap = new THREE.CubeTextureLoader().load([ urlPrefix + 'px.jpg', urlPrefix + 'nx.jpg', urlPrefix + 'py.jpg', urlPrefix + 'ny.jpg', urlPrefix + 'pz.jpg', urlPrefix + 'nz.jpg' ] );
3102+ 31 other calls in file
GitHub: 4MOR3/three-background
158 159 160 161 162 163 164 165 166 167this.camera.lookAt(this.camCtrl); this.camera.position.set(-10, 69, -160); } }; BasicOceanFactory.prototype.genNight = function () { var texture = new THREE.CubeTextureLoader().setPath('nightSky/') .load(['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg']); this.scene.background = texture; }; BasicOceanFactory.prototype.genWater = function () {
031+ 12 other calls in file
Ai Example
1 2 3 4 5 6 7 8 9const loader = new THREE.CubeTextureLoader(); const texture = loader.load([ "textures/cubemap_px.png", "textures/cubemap_nx.png", "textures/cubemap_py.png", "textures/cubemap_ny.png", "textures/cubemap_pz.png", "textures/cubemap_nz.png", ]);
In this example, we first create a new instance of the CubeTextureLoader class by calling new THREE.CubeTextureLoader(). We then call the load method of the CubeTextureLoader instance with an array of six URLs that point to the six images that make up the cube texture. These images should be in the format of equirectangular projection, which means that the image has a 2:1 aspect ratio and contains all six faces of the cube in one flat image. The load method then fetches the six images, combines them into a cube texture, and returns the resulting THREE.CubeTexture object as texture. You can then use the resulting texture object in your Three.js application to create materials that use the cube texture for reflection mapping or environment mapping. Note that in this example, we're assuming that the six images are stored in the textures folder of your application. You'll need to adjust the URLs to match the actual location of your images.
54 55 56 57 58 59 60 61 62 63var _d, _e, _f; return __generator(this, function (_g) { switch (_g.label) { case 0: loader = new three_1.FileLoader(); cubeMapLoader = new three_1.CubeTextureLoader(); vert = loader.loadAsync("shaders/spheretracing/vert.3se"); frag = loader.loadAsync("shaders/spheretracing/frag.glsl"); cubeMap = cubeMapLoader .setPath("cubemaps/aurora/")
000GitHub: ryo612/rhinestone
193 194 195 196 197 198 199 200 201const urls = [ 'src/posx.png', 'src/negx.png', 'src/posy.png', 'src/negy.png', 'src/posz.png', 'src/negz.png', ]; // const loader = new THREE.CubeTextureLoader(); // const textureCube = loader.load(urls); // textureCube.mapping = THREE.CubeReflectionMapping; //反射マッピングの設定
000+ 3 other calls in file
30 31 32 33 34 35 36 37 38// // process for this sketch. // const cubeTexLoader = new THREE.CubeTextureLoader(); const debris = new Debris(); const skybox = new SkyBox(); const postEffect = new PostEffect(renderBack.texture);
000
39 40 41 42 43 44 45 46 47 48other._obj3d.add(createSpriteText(name)); } }, createSkyBox: function (scene, urls, size) { let skyboxCubemap = new THREE.CubeTextureLoader().load(urls); skyboxCubemap.format = THREE.RGBFormat; let skyboxShader = THREE.ShaderLib['cube']; skyboxShader.uniforms['tCube'].value = skyboxCubemap;
000GitHub: MichaelPolla/mip-viewer
515 516 517 518 519 520 521 522 523 524}); } // standard var envMap = new THREE.CubeTextureLoader().load(cubeMapURLs); envMap.format = THREE.RGBFormat; return Promise.resolve(envMap); }
000+ 5 other calls in file
557 558 559 560 561 562 563 564 565 566 567 568for (var i = 0, len = myScene.maps.length; i < len; i++) { // for each texture in the array that needs loading myScene.maps[i].path = myScene.texturePath + myScene.maps[i].name + '_' + myScene.maps[i].type + myScene.maps[i].format; // create and save the full path to the texture myScene.maps[i].image = loader1.load(myScene.maps[i].path); // load the texture in to the object at the position in the array }; var loader2 = new THREE.CubeTextureLoader(manager); loader2.setPath( './imgs/cube/' ); var textureCube = loader2.load( [ 'envmap_left.jpg', 'envmap_right.jpg',
000+ 2 other calls in file
GitHub: Neticon/webgl-tests
13 14 15 16 17 18 19 20 21 22lightCH: false } const clock = new THREE.Clock() const textureLoader = url => new THREE.TextureLoader().load(url) const cubeTextureLoader = (() => { const loader = new THREE.CubeTextureLoader() const faces = ['px', 'nx', 'py', 'ny', 'pz', 'nz'] return (path, extension) => { const urls = faces.map(face => `${path}${face}${extension}`) return loader.load(urls)
004+ 2 other calls in file
three.Vector3 is the most popular function in three (22341 examples)