Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to set the effect of a single model in Three.js development. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

For gltf models loaded in Three.js, see GIS development: Threejs loads gltf models, which can set some effects of the model, such as setting the transparency of the model, displaying wireframe, or setting the color of the model. The model loaded by Three.js is a model scene (scene) data, and the scene includes three-dimensional objects (Object3d), one or more objects, so when setting up the model, it is generally necessary to loop the model in the scene.

When loading the gltf model, set the name of the model scene (scene) to facilitate the initialization of the scene (scene) to get the model scene.

/ / set the name of the model scene

Model = gltf.scene

Model.name = "testmodel"

/ / get a model scene from a large scene

Let modelscene = scene.getObjectByName ('testmodel'); the 3D model of the model scene needs to be traversed by traverse.

Transparency settings for the model:

Modelscene.traverse (function (object) {

If (object.isMesh) {

/ / set the model transparency first, otherwise transparency will not work.

Object.material.transparent = true

/ / set model material transparency

Object.material.opacity = 0.8

})

Set the wireframe diagram of the model:

Modelscene.traverse (function (object) {

If (object.isMesh) {

/ / set wireframe to true

Object.material.wireframe = true

})

Set up the color overlay model:

Let modelscene = scene.getObjectByName ('testmodel')

Modelscene.traverse (function (object) {

If (object.isMesh) {

/ / set the color of the material

Object.material.color = new THREE.Color (0xff0000)

})

This is the end of the article on "how to set the effect of a single model in Three.js development". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.