background

A new project of the company requires simulation, so we explored and found Three. js to do it. The company is already engaged in GIS related business, so we will contact Three. js sooner or later. (The company also requires to learn OpenLayer, cesium, alas, feel time is not enough!)

Ok, to get down to business, draw a simple cube with three.js.

The body of the

1. There are three ways to build the environment:

1) Direct CDN introduction of an online three.min.js, can be developed, but it is not convenient for debugging.

2), NPM download a file, but the file may not be very complete, blogger pro test.

3) Go to the official website of three. Js to download a project directly (this is recommended, for beginners, the official documentation is very important, many APIS have to check by themselves, and the local running speed is much faster than online, especially some examples).

It is also very easy to run the node service, or vscode to install an online running plug-in live Server, by the way, if you do not involve the model related operation in the local web page, otherwise the file protocol will be dead when downloading the model.

2. Code operation

1) Create a new HTML page and introduce related resources (I introduced here the rewrite of es6 syntax of three.js, you can also introduce other versions, but it is best to use the new version, at least the code is convenient for debugging, and it is also convenient to solve problems.)

import * as THREE from './build/three.module.js';
Copy the code

<div id="container"></div>
Copy the code

2), then instantiate the renderer, scene, camera, etc.

var camera, scene, renderer,width,height;
var container = document.createElement( 'div' );
  document.getElementById('container').appendChild( container );
  renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true}); The renderer. SetClearAlpha (0.2); The renderer. SetClearColor (0 x000000, 0.0); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( width, height ); container.appendChild( renderer.domElement ); scene = new THREE.Scene(); // PerspectiveCamera = new THREE.PerspectiveCamera(90, width/height, 1, 8000); camera.position.set( 380, 50, 500 ); scene.add( camera ); // Listen for window changes update view render window.adDeventListener ('resize', onWindowResize, false );
Copy the code

SetClearAlpha and setClearColor are used to clear the background of the canvas. After setting the background transparent, it will show the background color of the body. You can try it yourself, and then set the resolution and width of the rendering window.

Here I use perspective projection camera. In fact, the commonly used OrthographicCamera and OrthographicCamera can be viewed in the official document. If you don’t understand this camera, you can use the OrthographicCamera. Take a look at the official example and CameraHelper.

3) Then there is the drawing

var material = new THREE.MeshPhongMaterial( { color: 0x0081cf } ); var geometry = new THREE.BoxBufferGeometry(100, 100 ,100); var mesh = new THREE.Mesh( geometry, material ); Mesh. The position. The set (375,50,225); scene.add(mesh);Copy the code

Here, the three parameters are length, width and height, and other parameters can be referred to the document. Mesh is a mesh, and geometry cannot be rendered on the screen. Only geometry and material combined into a mesh can be rendered on the screen.

4) Add the camera and scene to the renderer, set the window to change the size and resolution, here uses requestAnimationFrame frame animation, this timer is a better animation mechanism, you can also learn about it, will use later.

function animate() {
  stopAnimation = requestAnimationFrame( animate );
  renderer.render( scene, camera );
}
function onWindowResize() {
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height );
}
animate(); 

Copy the code

So I’ve drawn a cube here

conclusion

Today, I introduced the simple use of three.js, and I will continue to share relevant knowledge of three.js later, so that we can make progress together. This article has been written from the year before to the year after, but it has been delayed for a long time. I also hope that the epidemic will be over as soon as possible, and everyone can be happy!

In addition, when you encounter any problems in learning three.js, you can first look at the source code. You can customize many things according to your own ideas, and then you can go to Git to leave a comment on the author or see if others’ questions are the same.

Anyway, see you next time!