How to use the ImageUtils function from three
Find comprehensive JavaScript three.ImageUtils code examples handpicked from public code repositorys.
GitHub: fluuuid/labs
![fluuuid profile picture](/fluuuid.png?size=40)
34 35 36 37 38 39 40 41 42
var geometry = new THREE.SphereGeometry(200, 40, 40); // shader = this.shaders['earth']; // uniforms = THREE.UniformsUtils.clone(shader.uniforms); var texture = THREE.ImageUtils.loadTexture('world.jpg'); texture.minFilter = THREE.LinearFilter; // uniforms['texture'].value = texture;
102 103 104 105 106 107 108 109 110 111
var pathMat = new THREE.RawShaderMaterial({ uniforms: { image1: { // Check the Three.JS documentation for the different allowed types and values type: "t", value: THREE.ImageUtils.loadTexture('./images/tex_nor_maps/path/TilingStone1.jpg') }, ambientLight: { type: "v3",
+ 3 other calls in file
GitHub: mattdesl/filmic-gl
![mattdesl profile picture](/mattdesl.png?size=40)
52 53 54 55 56 57 58 59 60 61
path + 'px' + format, path + 'nx' + format, path + 'py' + format, path + 'ny' + format, path + 'pz' + format, path + 'nz' + format ]; var reflectionCube = THREE.ImageUtils.loadTextureCube( urls ); reflectionCube.format = THREE.RGBFormat; var refractionCube = new THREE.Texture( reflectionCube.image, new THREE.CubeRefractionMapping() ); refractionCube.format = THREE.RGBFormat;
+ 5 other calls in file
GitHub: mattdesl/xmas
![mattdesl profile picture](/mattdesl.png?size=40)
19 20 21 22 23 24 25 26 27
var nrm = THREE.ImageUtils.loadTexture(normUrl) nrm.wrapS = nrm.wrapT = THREE.RepeatWrapping nrm.minFilter = nrm.magFilter = THREE.LinearFilter nrm.generateMipmaps = false var tex = THREE.ImageUtils.loadTexture(matCapUrl) //mcap1, mcap4 tex.wrapS = tex.wrapT = THREE.ClampToEdgeWrapping tex.minFilter = tex.magFilter = THREE.LinearFilter tex.generateMipmaps = false
+ 7 other calls in file
GitHub: zya/swirl
![zya profile picture](/zya.png?size=40)
7 8 9 10 11 12 13 14 15 16
path + 'py' + format, path + 'ny' + format, path + 'pz' + format, path + 'nz' + format ]; var textureCube = THREE.ImageUtils.loadTextureCube(urls, THREE.CubeRefractionMapping); var reflectionCube = THREE.ImageUtils.loadTextureCube(urls); reflectionCube.format = THREE.RGBFormat; var refractionCube = new THREE.Texture(reflectionCube.image, THREE.CubeRefractionMapping); reflectionCube.format = THREE.RGBFormat;
+ 3 other calls in file
GitHub: Siroko/SpringGPU
![Siroko profile picture](/Siroko.png?size=40)
70 71 72 73 74 75 76 77 78
'geom' : object.children[ 0 ].geometry, 'uniforms' : { 'uTime' : { type: 'f', value: 0 }, 'uTouch' : { type: 'v3v', value: [ this.positionTouch1, this.positionTouch2 ] }, 'uWorldPosition': { type: 'v3', value: this.worldPosition }, 'normalMap' : { type: 't', value: THREE.ImageUtils.loadTexture( 'assets/matcaps/MatCap_00.jpg' ) }, 'textureMap' : { type: 't', value: THREE.ImageUtils.loadTexture( 'assets/matcaps/MatCap_00.jpg' ) } } });
+ 7 other calls in file
GitHub: RichardLitt/webui
![RichardLitt profile picture](/RichardLitt.png?size=40)
121 122 123 124 125 126 127 128 129 130
var geometry = new THREE.SphereGeometry(200, 40, 30) shader = Shaders['earth'] uniforms = THREE.UniformsUtils.clone(shader.uniforms) uniforms['texture'].value = THREE.ImageUtils.loadTexture(imgDir + 'world.jpg') material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: shader.vertexShader,
205 206 207 208 209 210 211 212 213 214
* * Usage: * * // Assuming the textures are already loaded * var material = THREE.Terrain.generateBlendedMaterial([ * {texture: THREE.ImageUtils.loadTexture('img1.jpg')}, * {texture: THREE.ImageUtils.loadTexture('img2.jpg'), levels: [-80, -35, 20, 50]}, * {texture: THREE.ImageUtils.loadTexture('img3.jpg'), levels: [20, 50, 60, 85]}, * {texture: THREE.ImageUtils.loadTexture('img4.jpg'), glsl: '1.0 - smoothstep(65.0 + smoothstep(-256.0, 256.0, vPosition.x) * 10.0, 80.0, vPosition.z)'}, * ]);
+ 15 other calls in file
GitHub: bgun/cosmosis
![bgun profile picture](/bgun.png?size=40)
49 50 51 52 53 54 55 56 57 58
fragmentShader: document.getElementById('fragmentshader').textContent, side: THREE.DoubleSide }); var gMaterial = new THREE.PointCloudMaterial({ map: THREE.ImageUtils.loadTexture( "images/map_mask.png" ), color : 0xffffff, size : 75,
+ 7 other calls in file
110 111 112 113 114 115 116 117 118 119
function createMaterials() { defaultMaterial = new THREE.ShaderMaterial({ uniforms: { image: { // Check the Three.JS documentation for the different allowed types and values type: "t", value: THREE.ImageUtils.loadTexture('./images/adam.jpg') } }, vertexShader: require('./shaders/workingRef-vert.glsl'), fragmentShader: require('./shaders/workingRef-frag.glsl')
+ 7 other calls in file
GitHub: hobuinc/usgs-lidar
1566 1567 1568 1569 1570 1571 1572 1573 1574 1575
colorClampLower: { type: 'f', value: cclamp[0] }, colorClampHigher: { type: 'f', value: cclamp[1] }, zrange: { type: 'v2', value: new THREE.Vector2(0, 0) }, offsets: { type: 'v3', value: new THREE.Vector3(0, 0, 0) }, map: { type: 't', value: THREE.ImageUtils.loadTexture(currentColorMap())}, // clipping controls do_plane_clipping: { type: 'i', value: 0 }, planes: { type: 'v4v', value: _.times(6, function() { return new THREE.Vector4(); }) }
GitHub: alan-wu/ZincJS
446 447 448 449 450 451 452 453 454 455
}; }; this.addLogo = () => { logoSprite = new THREE.Sprite(); const logo = THREE.ImageUtils.loadTexture( "images/abi_big_logo_transparent_small.png", undefined, createHUDSprites(logoSprite)); } /**
GitHub: Cherna/cherna.github.io
103 104 105 106 107 108 109 110 111 112
var boxSize = 1, boxSegments = 5, // mainGeometry = new THREE.SphereGeometry(1, 16, 16); mainGeometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize, boxSegments, boxSegments, boxSegments); // var texture = THREE.ImageUtils.loadTexture('assets/images/sand-texture-lq.jpg', {}, function() { // renderer.render(scene, camera); // }); var mainMaterial = new THREE.MeshStandardMaterial({
GitHub: ktbartholomew/roll-the-dice
![ktbartholomew profile picture](/ktbartholomew.png?size=40)
10 11 12 13 14 15 16 17 18 19
return new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({ color: color, shading: THREE.FlatShading, alphaMap: THREE.ImageUtils.loadTexture('/src/models/d4.png'), // wireframe: true }) ); },
12855 12856 12857 12858 12859 12860 12861 12862 12863
var planes = []; var basePlanes = []; // always visible var texture = null; var lightMap = THREE.ImageUtils.loadTexture("rooms/textures/walllightmap.png"); var fillerColor = 0xdddddd; var sideColor = 0xcccccc; var baseColor = 0xdddddd;
+ 55 other calls in file
12855 12856 12857 12858 12859 12860 12861 12862 12863
var planes = []; var basePlanes = []; // always visible var texture = null; var lightMap = THREE.ImageUtils.loadTexture("static/rooms/textures/walllightmap.png"); var fillerColor = 0xdddddd; var sideColor = 0xcccccc; var baseColor = 0xdddddd;
+ 351 other calls in file
GitHub: jamala/sound-motion
![jamala profile picture](/jamala.png?size=40)
37 38 39 40 41 42 43 44 45 46
var adamMaterial = new THREE.ShaderMaterial({ uniforms: { image: { // Check the Three.JS documentation for the different allowed types and values type: "t", value: THREE.ImageUtils.loadTexture('./adam.jpg') } }, vertexShader: require('./shaders/adam-vert.glsl'), fragmentShader: require('./shaders/adam-frag.glsl')
GitHub: captDaylight/sugar
![captDaylight profile picture](/captDaylight.png?size=40)
138 139 140 141 142 143 144 145 146 147
// START UP ALL OF THE SKY MATERIALS //////////////////// for(var i = 0; i < 5; i++){ var urls = getSkyboxImageArray(skyboxDirectories[i]); var textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping()); var material = new THREE.MeshBasicMaterial( { color: 0xeeeeee, envMap: textureCube, refractionRatio: 0.99 } ); // var material = new THREE.MeshBasicMaterial( { color: 0xaaaaff, envMap: textureCube } ); // var material = new THREE.MeshLambertMaterial( { color: 0xffffff, emissive: 0x0000ff, shading: THREE.FlatShading } ); skyMaterials.push({material: material, textureCube: textureCube});
GitHub: captDaylight/sugar
![captDaylight profile picture](/captDaylight.png?size=40)
13 14 15 16 17 18 19 20 21
]; return urls; } module.exports = function (scene) { textureCube = THREE.ImageUtils.loadTextureCube( ['images/skyboxes/bigCube/smaller.jpg','images/skyboxes/bigCube/smaller.jpg','images/skyboxes/bigCube/smaller.jpg','images/skyboxes/bigCube/smaller.jpg','images/skyboxes/bigCube/smaller.jpg','images/skyboxes/bigCube/smaller.jpg'], new THREE.CubeRefractionMapping()); shader = THREE.ShaderLib.cube; shader.uniforms.tCube.value = textureCube;
GitHub: mikkoh/Celestia
![mikkoh profile picture](/mikkoh.png?size=40)
44 45 46 47 48 49 50 51 52 53
scene.add(light); var sphereGeometry = new THREE.SphereGeometry(50, 32, 16); var moonTexture = THREE.ImageUtils.loadTexture('../data/images/moonmap.jpg'); // var bumpTexture = THREE.ImageUtils.loadTexture('../data/images/moonbump.jpg'); var moonMaterial = new THREE.MeshLambertMaterial({ map: moonTexture // bumpMap: bumpTexture, // bumpScale: 0.002
+ 7 other calls in file
three.Vector3 is the most popular function in three (22341 examples)