three.js share via module import example

This article mainly introduces you to the relevant information about three.js Chinese document learning through module import. The article introduces it in great detail through sample code. It has certain reference learning value for everyone to learn or use three.js. It is needed Friends, please follow the editor to learn together.

Preface

This article mainly introduces you to the relevant content about three.js imported through modules. Importing three.js through script tags is a good way to get started and run quickly. For long-term The updated project has some shortcomings, such as:

• You need to manually call and introduce a copy of the library as part of your project source code.

• Updating a repository version is a manual process

• When introducing a new repository, your version management differences will be messed up with the source files

Using a dependency manager like NPM can avoid the shortcomings of these version issues.

Installation via NPM

three.js has been released as an npm module, see: npm. Regarding the uninstallation and installation of npm, you can refer to this article: http://www.jb51.net/article/90518.htm. I won’t go into too much detail here. After the installation is successful, you only need to run npm install three, three.js will be included in your project.

Import modules

Assuming you use Webpack or Browserify's packaging tool, it will allow you to use require('modules') in your code to reference all packaged dependencies.

You should now be able to import the module in the source code and proceed as normal.

var THREE = require('three');
var scene = new THREE.Scene();

You can also use ES6 import syntax

import * as THREE from 'three';

const scene = new THREE.Scene();

Or you want to import parts of the three.js library, such as importing Scene:

import {Scene} from 'three';
const scene = new Scene();

Warning

Currently it is not possible to import all files in the "examples/js" directory. This is due to some files relying on the global namespace THREE, causing pollution. For details, please inquire about Transform examples/js to support modules #9562.

Related recommendations:

Python module import to implement the functions you need

Detailed explanation of how to run three.js locally

JS library Three.js basic introduction

The above is the detailed content of three.js share via module import example. For more information, please follow other related articles on the PHP Chinese website!