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

This article mainly shows you "Three.js how to load three-dimensional pipelines", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "Three.js how to load three-dimensional pipelines" this article.

Preparation knowledge: 1. Three.js: 3D model loading test

2, Three.js development: modify the default mouse control 3, GIS development: Threejs load gltf model three.js can load a certain amount of 3D model data, of course, can also load a certain amount of pipeline data, three.js mouse control, will affect the placement of the pipeline.

In most 3D platforms, the principle of loading pipelines is similar, except that the rendering of API in 3D engines is different. Pipeline system generally has two kinds of data: pipeline data and pipe fitting data. Here is a brief description of how to load simple three-dimensional pipeline data in three.js. Although pipeline data is line data, it is not equal to line data, because the pipeline is in the shape of cylinder and box. In 3D engine, a pipeline is generally loaded as an object in a single position, rather than conventional linear data. There are two ways to display pipelines: draw pipelines with api in three.js, and use existing 3D models

The self-contained cylinder object code is implemented to set the diameter and length of the pipeline.

Let geometry = new THREE.CylinderGeometry (2,2,60,32)

Let material = new THREE.MeshBasicMaterial ({

Color: 0xffff00

});

Let cylinder = new THREE.Mesh (geometry, material)

Scene.add (cylinder)

Three-dimensional model form (see 3-Threejs loading gltf model) to realize the display of pipe diameter and length by modifying the proportion of the model.

Let loader = new THREE.GLTFLoader ()

Loader.load ('data/pipetype1.glb', function (gltf) {

Model = gltf.scene

Scene.add (model)

Model.traverse (function (object) {

If (object.isMesh) {

Object.castShadow = true

}

});

Model.scale.set (2,2,60)

Model.position.set (4000,-1.0,2000)

});

Simple implementation of the effect:

Follow-up information about the pipeline settings will be introduced in the spare time.

These are all the contents of the article "how to load 3D pipelines in Three.js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.