ThreeJS in the first round-start and ThreeJS in the first round-

ThreeJS in the first round-start and ThreeJS in the first round-

This article describes the general process of ThreeJS. (For more information, please advise .)

1. Download and introduce ThreeJS:

(1): https://github.com/mrdoob/three.js/archive/master.zip

(2) Introduction: <script type = "text/javascript" src = "~ /Scripts/three. js "> </script>

2. Start:

(1) define canvas

<Canvas id = "canvas" width = "1000" height = "500"> </canvas>

(2) // Renderer

Var renderer = new THREE. WebGLRenderer ({canvas: document. getElementById ("canvas"),}); renderer. setClearColor (0x000000 );

(3) // scenario

Var scene = new THREE. Scene ();

(4) // camera

Var camera = new THREE. orthographicCamera (-5, 5, 2.5,-2.5, 0, 10); camera. position. set (1, 2, 5); camera. lookAt (new THREE. vector3 (0, 0); scene. add (camera );

(5) // object

Var cube = new THREE. Mesh (new THREE. CubeGeometry (1, 1, 1), new THREE. MeshLambertMaterial ({color: 0xff0000}); scene. add (cube );

(6) // Lighting

Var light = new THREE. DirectionalLight (); light. position. set (1, 2, 5); scene. add (light );

(7) // Rendering

Renderer. render (scene, camera );

3. Run the Code with the following effect:

4. Conclusion:

This article aims to feel ThreeJS.