Photo credit: unsplash.com/photos/UD5d…
We are committed to building the first “cloud CAD” collaborative design platform integrating viewing, modeling, assembly and rendering in China.
At the request of readers, we hope that we can set up a professional QQ communication group for webGL and Threejs industry for front-end developers in Chengyu area, so as to facilitate discussion. The group has webGL, Threejs big guy oh, welcome to join! — Click the link to join the group chat [Three.js/WebGL Chongqing Alliance Group] : jq.qq.com/?_wv=1027&k…
One, foreword
Today’s article mainly introduces the texture map module in three.js. When rendering a 3D object, the Mesh determines the shape of the object, such as a ball, a car, a person, etc. And the texture determines exactly what the surface of the object looks like. A bag with a pattern of a basketball is a basketball, while a bag with a pattern of a soccer ball is probably a football.
Second, the overview
A variety of textures are defined in three.js. The class diagram is as follows.
The base class for a Texture is Texture, which is usually used to construct a Texture by passing in an Image to its property Image. A texture is a property of a material that, along with the geometry Gemotry, forms a Mesh and is then added to the Scene for rendering. Texture determines what the surface of an object should look like, and material determines what kind of “temperament” the object has.
Three, texture introduction
1, Texture,
There are many texture properties, but in general, you don’t need to set them all at once. Instead, take the default values. Also, we usually use TextureLoader to construct a texture for us, not directly. Here’s an example.
var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4.4 );
Copy the codeNormally, we can do it with this simple setup. In practice, however, we may encounter situations where we need to specify our own texture coordinates. At this point, we need to calculate the texture coordinates ourselves and add the property “UV” to the geometry to apply our own texture coordinates.
geom.addAttribute('uv'.new THREE.BufferAttribute(uvArr, 2))
Copy the codeLoading an image through the load() method of the TextureLoader returns a Texture object called Texture, which is used as the value of the color map property of the model material.
When the texture map is set, the model will collect pixel values from the texture map. It is generally not necessary to set the texture color. The color map map is called color map because the mesh model obtains the color value of the color map RGB.
// The texture map is mapped to a rectangular plane
var geometry = new THREE.PlaneGeometry(204.102); // The rectangular plane
// TextureLoader creates a TextureLoader object that can load images as geometric textures
var textureLoader = new THREE.TextureLoader(); // Execute the load method and return a texture object when the texture map is successfully loaded
Texture textureLoader.load('Earth.png'.function(texture) {
var material = new THREE.MeshLambertMaterial({
// color: 0x0000ff,
// Set the color Texture map: Texture object as the property value of the material map property
map: texture,// Set the color map attribute value
});
// Material object
Material var mesh = new THREE.Mesh(geometry, material);
// Grid model object
Mesh scene.add(mesh);
// Add the grid model to the scene
// When the texture is loaded successfully, call the render function to render
// render();
})
Copy the code2, CanvasTexture
In three. js, it is inevitable to set the material of the entity. For example, to add a color, picture or video to a box. You can see the code below
new THREE.MeshBasicMaterial({color: Math.random() * 0xffffff}); / / color
new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('./assets/plane.jpeg')});/ / picture
new THREE.VideoTexture(document.getElementId('video')); / / video
Copy the codeIn fact, these functions are enough for me. Later, I found that I can also use canvas rendering as the material, so I wrapped it for my demo
var createCanvas = function (w,h) {
w = w || 30;
h = h || 30
var cs = document.createElement('canvas')
var ctx = cs.getContext('2d');
cs.width = w;
cs.height = h;
ctx.fillStyle ="#fff";
ctx.fillRect(0.0,w,h);
ctx.strokeStyle = "#c00";
ctx.shadowBlur = 20;
ctx.shadowColor = "#c99";
ctx.strokeWidth = 30;
ctx.beginPath();
ctx.moveTo(w/2.0);
ctx.lineTo(0,h);
ctx.lineTo(w, h);
ctx.closePath()
ctx.stroke();
return cs;
}
var texture = new THREE.Texture(createCanvas(130.130))
var material = new THREE.MeshBasicMaterial({
map: texture
})
Copy the codeAttached are renderings
3, DataTexture (DataTexture object)
The DataTexture is simply a program that creates every pixel value of the texture map.
The program generates the RGB value of an image
var geometry = new THREE.PlaneGeometry(128.128); // The rectangular plane
/** * Create texture object pixel data */
var width = 32; // Texture width
var height = 32; // Texture height
var size = width * height; // Pixel size
var data = new Uint8Array(size * 3); // Size *3: size occupied by pixels in the buffer
for (let i = 0; i < size * 3; i += 3) { // Set the value of the RGB component randomly
data[i] = 255 * Math.random()
data[i + 1] = 255 * Math.random()
data[i + 2] = 255 * Math.random()
}
// Create the data texture object in RGB format: three.rgbFormat
var texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat);
texture.needsUpdate = true;
// Update the texture
// Print the image property of the texture object
// console.log(texture.image);
var material = new THREE.MeshPhongMaterial({
map: texture, // Set the texture map
});
// The object is called "Material"
var mesh = new THREE.Mesh(geometry, material);
Copy the codeWrite in the last
This article introduces Texture related content of three.js, including how to use Texture, CanvasTexture, DataTexture.
This article is published from yuntu 3D big front end team. Any unauthorized reprint of the article is prohibited.