Is there a more mature acquisition scheme for UV mapping of Three.js more complex maps?
I want to make a model with 3dmax and load using ThreeJS . Given the mapping rules, the map image resource is later loaded image or canvas, can replace the map and re-render with one click.
because the model is not a simple square or other regular graphics, and irregular graphics, the data I look for says that we can use UV mapping to describe the mapping relationship between the map and the model. But it feels unrealistic to write by hand. Can 3D tools such as 3D Max map and then load UV mapping export into ThreeJS ?
my idea is this:
- map in 3dmax
- Export obj and mtl File
-
ThreeJS call API to modify map
I would like to ask whether this direction is feasible, and whether ThreeJs can modify the map under this scheme.
if it is not feasible, I hope some great god can show the way
same question, mark
in the process of learning ThreeJS, we often wonder why it is so complicated to make a model. It is impossible to start with complex UV mapping. In fact, most of the models in Demo are made using desktop software, including modeling, mapping, animation, etc., but it takes a lot of effort and effort to complete some of the works.
in fact, most of the models in Demo are made using desktop software, including modeling, mapping, animation, etc., and you can also use ThreeJS to complete some of the works, but it is laborious and laborious. In my opinion, it cannot be used as a mature scheme for commercial use
< hr >
use 3D max modeling (all kinds of modeling software can), create UV expansion, export obj format files with mapping information (take obj as an example)
load using ThreeJS, where the role of ThreeJS is only similar to the video player, only complete the work of model loading and rendering, modeling mapping and other work can be handed over to desktop software such as 3D max
.
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
manager.onLoad = function ( item, loaded, total ) {
console.log( 'load finish' );
};
//
var textureLoader = new THREE.TextureLoader( manager );
var texture = textureLoader.load( '/obj/caizhi.png' );
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
};
//
var loader = new THREE.OBJLoader( manager );
loader.load( '/obj/C-BOX.obj', function ( obj ) {
obj.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
//
child.material.map = texture;
}
} );
//
scene.add( obj );
}, onProgress, onError );
