Friendly links: threejs Chinese documentation
Table of contents
1. Introduction to GLTF format (JPG in Web3D field)
2. Load .gltf file (whole process)
(2) gltf loader new GLTFLoader()
(4) Solving texture map color deviation
3. Recursively traverse the hierarchical model
Recursive traversal method.traverse()
View the default material of gltf
4. Texture encoding and renderer
Texture object Texture color space encoding attribute.encoding
View the Texture.encoding property value in the browser console
1. Introduction to GLTF format (JPG in Web3D field)
The GLTF format is a 3D model format newly released in 2015. With the further development of the Internet of Things, WebGL, and 5G, more and more Internet projects will introduce 3D elements on the Web. You can understand the 3D model in the GLTF format as .jpg, .png format pictures are the same. Pictures are basically standard on today’s websites. For future websites, if a scene needs to be displayed, it is normal to use 3D to replace the picture expression. There are many formats for pictures, and the same is naturally true for 3D models. During Web development, pictures will have common formats. The same is true for Web3D development. You will definitely choose a common format that everyone is familiar with according to your needs. As time goes by, GLTF will inevitably be called It is an extremely important standard format.
Not only three.js, other WebGL three-dimensional engines cesium and babylonjs have good support for the gltf format.
GLTF format information
If you have a certain front-end foundation, then you must be familiar with JSON. GLTF files represent model information through JSON key-value pairs. For example, meshes represent mesh model information, and materials represent material information...
{
"asset": {
"version": "2.0",
},
...
// 模型材质信息
"materials": [
{
"pbrMetallicRoughness": {//PBR材质
"baseColorFactor": [1,1,0,1],
"metallicFactor": 0.5,//金属度
"roughnessFactor": 1//粗糙度
}
}
],
// 网格模型数据
"meshes": ...
// 纹理贴图
"images": [
{
// uri指向外部图像文件
"uri": "贴图名称.png"//图像数据也可以直接存储在.gltf文件中
}
],
"buffers": [
// 一个buffer对应一个二进制数据块，可能是顶点位置 、顶点索引等数据
{
"byteLength": 840,
//这里面的顶点数据，也快成单独以.bin文件的形式存在
"uri": "data:application/octet-stream;base64,AAAAPwAAAD8AAAA/AAAAPwAAAD8AAAC/.......
}
],
}2. Load .gltf file (whole process)
(1) Introduce GLTFLoader.js
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';(2) gltf loader new GLTFLoader()
Executing new GLTFLoader() can instantiate a gltf loader object.
// 创建GLTF加载器对象
const loader = new GLTFLoader();(3) gltf loader method.load()
External gltf models can be loaded through the gltf loader method .load(). Executing the method .load() will return a gltf object as a parameter of the parameter 2 function. The gltf object can contain model, animation and other information. In this lesson, you only need to first understand the scene attribute gltf.scene of gltf. This attribute contains It is model information, such as geometry BufferGometry, material, and mesh model Mesh.
loader.load( 'gltf模型.gltf', function ( gltf ) {
console.log('控制台查看加载gltf文件返回的对象结构',gltf);
console.log('gltf对象场景属性',gltf.scene);
// 返回的场景对象gltf.scene插入到threejs场景中
scene.add( gltf.scene );
})(4) Solving texture map color deviation
When three.js loads the gltf model, you may encounter color deviations in the three.js rendering results. In this case, you only need to modify the default encoding method of the WebGL renderer.outputEncoding.
//解决加载gltf格式模型纹理贴图和原图不一样问题
renderer.outputEncoding = THREE.sRGBEncoding;Attention ! ! ! ! ! ! ! The property names have changed in the latest version. The renderer property name .outputEncoding has been changed to .outputColorSpace. Check the WebGL renderer documentation, and you can see that the default value of .outputColorSpace is the SRGB color space THREE.SRGBColorSpace, which means that in the new version of the code, there is no special need to load gltf, and no color difference will be caused if .outputColorSpace is not set.
//新版本，加载gltf，不需要执行下面代码解决颜色偏差
renderer.outputColorSpace = THREE.SRGBColorSpace;//设置为SRGB颜色空间3. Recursively traverse the hierarchical model
Load an external model, such as the gltf model. If you want to batch modify the materials of each Mesh, it is troublesome to set them one by one. You can use the recursive traversal method .traverse() to make batch operations more convenient.
Recursive traversal method.traverse()
gltf.scene.traverse(function(obj) {
if (obj.isMesh) {//判断是否是网格模型
console.log('模型节点',obj);
console.log('模型节点名字',obj.name);
}
});View the default material of gltf
For models in different formats such as .obj, .gltf, .fbx, etc., the default material loaded by threejs may be different, but there is no need to remember it deliberately. You can print it through the browser console log console.log(obj.material)
// 递归遍历所有模型节点批量修改材质
gltf.scene.traverse(function(obj) {
if (obj.isMesh) {
console.log('gltf默认材质',obj.material);
}
});4. Texture encoding and renderer
If there are no special needs, generally in order to render normally and avoid color deviation, the color map.encoding and renderer.outputEncoding property values need to be consistent in the threejs code.
Texture object Texture color space encoding attribute.encoding
The texture object Texture color space (opens new window) encoding attribute.encoding has multiple attribute values. The default value is the linear color space THREE.LinearEncoding.
- THREE.LinearEncoding: linear color space
- THREE.sRGBEncoding: sRGB color space
View the Texture.encoding property value in the browser console
const texture = new THREE.TextureLoader().load('./earth.jpg');
texture.encoding = THREE.LinearEncoding;//默认值
// THREE.LinearEncoding变量在threejs内部表示数字3000
console.log('texture.encoding',texture.encoding);
// 修改为THREE.sRGBEncoding，
texture.encoding = THREE.sRGBEncoding;
// THREE.sRGBEncoding变量在threejs内部表示数字3001
console.log('texture.encoding',texture.encoding);WebGL renderer.outputEncoding
The default value of . outputEncoding is linear space THREE. LinearEncoding , which is the same as the default value of texture object .encoding. If the value of color map.encoding is THREE. sRGBEncoding , in order to avoid color deviation, the value of . outputEncoding also needs to be set to THREE. sRGBEncoding .
//解决加载gltf格式模型颜色偏差问题
renderer.outputEncoding = THREE.sRGBEncoding;Attention ! The property names have changed in the latest version. The renderer property name .outputEncoding has been changed to .outputColorSpace
Some of the materials in the article are selected from Threejs Chinese website: Three.js Chinese website