How to use the ImageUtils function from three

Globe.js

GitHub: fluuuid/labs

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;

40

163

13

main.js

GitHub: AmanSachan1/InterestingLevelGenerator

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",

14

0

2

+ 3 other calls in file

main.js

GitHub: mattdesl/filmic-gl

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;

2

51

7

+ 5 other calls in file

create-orb.js

GitHub: mattdesl/xmas

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

2

16

2

+ 7 other calls in file

envMaps.js

GitHub: zya/swirl

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;

1

2

3

+ 3 other calls in file

World3D.js

GitHub: Siroko/SpringGPU

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' ) }
    }
});

0

1

6

+ 7 other calls in file

globe.js

GitHub: RichardLitt/webui

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,

491

0

3

THREE.Terrain.js

GitHub: godrin/antargis.js

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)'},
*    ]);

0

2

3

+ 15 other calls in file

lspm.js

GitHub: bgun/cosmosis

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, 

0

1

2

+ 7 other calls in file

main.js

GitHub: hanbollar/Music-Visualizer

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')

16

0

2

+ 7 other calls in file

render.js

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(); }) }

13

110

0

renderer.js

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));
}

/**

9

3

0

home2.js

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({

0

1

0

d4.js

GitHub: ktbartholomew/roll-the-dice

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
    })
  );
},

0

1

1

blueprint3d.js

GitHub: 2022-SMHRD-IS-AI1/MyPlace

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;

0

0

0

+ 55 other calls in file

blueprint3d.js

GitHub: 2022-SMHRD-IS-AI1/MyPlace

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;

0

0

0

+ 351 other calls in file

main.js

GitHub: jamala/sound-motion

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')

0

0

1

final.js

GitHub: captDaylight/sugar

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});

0

0

2

skybox.js

GitHub: captDaylight/sugar

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;

0

0

2

canvas.js

GitHub: mikkoh/Celestia

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

0

0

2

+ 7 other calls in file