Three. js External Model loading and Three. js model Loading

Three. js External Model loading and Three. js model Loading

1.First, go to the official website: Https://threejs.org/Download the three. js compressed package and import three. js under the build folder to our page through the src attribute of the script tag.

2.Create three. js core object

Scene(Scenario)

Camera(CAMERA)

Light(Light Source)

Mesh(Model)

Renderer(Renderer)

The last step is to render the renderer. render (scene, camera) displayed on our page)

3.OBJModel import

<Script type = "text/javascript" src = "js/OBJLoader. js"> </script>

<Script type = "text/javascript" src = "js/MTLLoader. js"> </script>

4.. JSModel import

First, we need to convert the. OBJ model file to the. JS file model.

. ObjThe format is converted to. js using a convert_obj_three.py tool officially provided by threejs.org. To use this tool, you must install the python environment.

Conversion process:

Put convert_obj_three.py, The. obj file to be converted, and The. mtl file in the same directory.

Open cmd and switch to the corresponding directory.

Python convert_obj_three.py-I infile. obj-o outfile. js [-t ascii | binary]

Two encoding methods are available for. js files (binary and ascii)

5.Prepare for Import

Ascii

Binary

Import required

<Script src = "js/BinaryLoader. js"> </script>