Three.js Getting Started Case Details

Recently, companies need Tree.js to implement a 3D picture display, just see the official document, just have time, record it.

Since our company’s front end frame is Angular, I put my treejs inside a Directive. Rear placement code

First we have to know the download address of Three.js It is: https://github.com/mrdoob/three.js.

Second, what is three.js?

Three.js Several steps:

1: Introduce the Three.js file (open the debug window, enter the three.revision command under Console, get the version Number, success)

2: Set a scene // var scene = new three. Scene ();

3: var camera = new three. PerspectiveCamera (75, window.innerwidth / window . InnerHeight, 0.1, 1000); set a perspective camera

4: var renderer = new three. WebGlrenderer (); renderer. setsize (window.innerwidth, window.innerHeight); set a renderer


5: add an object to the scene

modelUrl is added documents such as: $ scope DView = cy3DView newCanvas; $ scope DView config ( ‘canvas’)

…. ]
$ Scope.Process3DURL = DATA.RESUlt.data.engineering_stl_mcube; $ scope.DView.plan ($ scope.process3DUrl) function plan (modelUrl) {stlLoader = new THREE.STLLoader (); group = new THREE.Object3D (); stlLoader.load (modelUrl, function ( Geometry) {//console.log (geMetry); var Mat = new three.meshlambertmaterial ({color: 0x7777ff}); group = new three.mesh (geometry, MAT); group.Rotation.x = -0.5 * math. Pi; group.scale.set (0.6, 0.6, 0.6); Scene.Add (group); animation ();});}
   
6: Rendering

RENDERER.Render (Scene, Camera);

 OK is not very simple, personal thinking is the case, did not see I can understand me privately   The source code is as follows: 

(Window, Document) {‘Use strict’; var three = window. Three; var angular = window.angular; angular.module (‘CY-3D-VIEW’, []). Factory ( ‘cy3DView’, cy3DView); cy3DView $ inject = [ ‘$ rootScope’]; function cy3DView ($ rootScope) {return {newCanvas: new Object (newCanvas ($ rootScope))};}. function newCanvas () {var Scene, Camera, Renderer, Controls, Group, Ambient, Fov, Near, Far, StLLoader; Var Width, Height, Keylight, Fillight, Backlight, Spotlight, Lighting; Function Config () {// Set 3D diagram Wide and High Width . = document.getElementById ( ‘canvas’) clientWidth; height = document.getElementById ( ‘canvas’) clientHeight; renderer = new THREE.WebGLRenderer ({antialias: true});. renderer.setSize (width, height); renderer. ShadowMapenabled = true; document.getlementByid (‘canvas’). Appendchild (renderer.domelement); renderer.setclearcolor (0xfffffff, 1.0); Scene = new three.scene (); lighting = false; // Set color ambient = new three.ambientlight (0xfffff, 1.0); KEYLight = New Three.DirectionAllight (New Three); keylight = new three.directionall (new three .Color (‘HSL (30, 100%, 75%)’), 1.0); Keylight.Position.Set (- 100, 0, 100); Filllight = New Three.directionallight (New Three.color (‘HSL (240 , 100%, 75%) ‘), 0.75); Filllight.Position.set (100, 0, 100); backlight = new three.directionallight (0xfffff, 1.0); Backlight.Position.set (100, 0, -100 ) .NORMALIZE (); Spotlight = new three.spotlight (0xffff); Spotlight.Position.set (150, 150, 150); Scene.Add (Spotlight); // Camera Configuration FOV = 40; Near = 1; FAR = 1000; Camera = New Three.PerspectiveCamera (Fov, Width / Height, NEAR, FAR)Camera.position.x = 150; Camera.Position.y = 150; Camera.Position.z = 150; Camera.lookat ({x: 0, Y: 0, Z: 0}); Camera.lookat (New Three. Vector3 (0, 40, 0)); controls = new THREE.OrbitControls (camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.enableZoom = false; window.addEventListener ( ‘resize’, onWindowResize, false); window.addEventListener ( ‘keydown’, onKeyboardEvent, false); window.addEventListener ( ‘mousewheel’, mousewheel, false);} function mousewheel (e) {e.preventDefault (); if (e.wheelDelta) {// Judgment the browser IE, Google pulley event if (E.wheeldelta> 0) {// When the pulley is scrolling, fov – = (NEAR

0) {// When the pulley is scrollingFOV – = 1;} if (e.detail

The above is all the contents of this article, I hope that everyone’s learning is helpful, I hope everyone supports Tumi Cloud.
                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment