One, foreword

Three. Js (Github) is a 3D rendering library implemented by pure JavaScript. Its position in front-end 3D rendering is self-evident, as can be seen from its start 4.6K and fork 1.7K on Github. ThreeJs is precisely a WebGL-based wrapper, and WebGL is the front-end OpenGL.

Second, Github homepage interpretation

1. Introduction

The goal of the project was to create an easy-to-use, lightweight 3D library. The library provides Canvas 2D, SVG, CSS3D and WebGL renderers. Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples, Examples JPG Document: The Document is also very complete, the same works of conscience. Other links can be interested in their own to explore.

2. Use

Install it in your own page or import it as a module, or you can compile and import the source code yourself.

<script src="js/three.min.js"></script>
Copy the code

The following is a small example given by github home page. If you are interested, you can run it, change the parameters inside, and feel the 3D world.

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {PerspectiveCamera = new THREE.PerspectiveCamera(70, window.innerwidth/window.innerheight, 0.01, 10); camera.position.z = 1; // create scene scene = new three.scene (); // Create a 3D Box geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2); material = new THREE.MeshNormalMaterial(); // Create a mesh and add it to the scene.Mesh = new THREE. scene.add( mesh ); Renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); }function animate() { requestAnimationFrame( animate ); Mesh. Rotation. X + = 0.01; Mesh. Rotation. + y = 0.02; renderer.render( scene, camera ); }Copy the code

If you don’t want to do your own coding, you can also check out the effects drawn from JsFiddle on Github.

In addition to GitHub home page, it also provides an official website threejs.org/, the official website provides document entry, source code download address or direct download, at the same time, there are a lot of very dazzling product display. The Faraday FF, in particular, is a whale to my eye

Three, the source code basic structure

1. Local debugging source code

(2) NPM run dev starts a service locally

After success, a port 8080 will be opened on the machine below, and you can enjoy all the demo effects on the machine.

Console output

[HTTP] Starting up http-server, serving ./
[HTTP] Available on:
[HTTP]   http://127.0.0.1:8080
[HTTP]   http://192.168.31.175:8080
[HTTP] Hit CTRL-C to stop the server

Copy the code

2. Basic structure

The browser output the HTTP address above, such as http://127.0.0.1:8080, be careful to use HTTP/HTTPS protocol, otherwise the model in the routine cannot be downloaded, that is, FTP is not supported.

Then take a look at what modules are in SRC