Three.js Implementation 3D Model Explanation Size

Since the project needs to display the 3D model, I have studied THREE, share it, I hope to help you

First look:

three.js实现3D模型展示的示例代码

Three.js is not very difficult for you to study the heart to study the study.

first we need to create a 3D model on the page. It can be said to be initialized Three

Var Width, a Var Rendere; function initthree () {width = Document.documenTelement.ClientWidth / 2;
 HEIGHT = document.documentElement.clientHeight / 2; / * renderer * / renderer = new THREE.WebGLRenderer (); renderer.setSize (WIDTH, HEIGHT); renderer.setClearColor (new THREE.Color (0x66666)); renderer .gammainput = true; renderer.gammaoutput = true; document.body.Appendchild (renderer.Domelement);}     
It is not difficult to see the above code. We set it in Body Have an appended canvas as a half of the color is 0x66666 Here you should pay attention to renderer = new three.webglrendereR (); because all of our settings are set by renderer

We need to adjust the camera to the visual angle


/ * Camera * / var camera; function initCamera () {var view_angle = 45, aspect = width / height, near = 0.1, far = 10000; Camera = New Three.PerspectiveCamera (View_angle, Aspect, Near, FAR); Camera .position.set (20, 0, 0); // Set the center coordinate of the field of view Camera.lookat (Scene.Position);}
   The above code is mainly controlling visual The angle value can be adjusted according to its own needs in the later period 
loading scene:



/ * Scene * / var footne; function INITSCENE () {Scene = New Three.Scene ();}
Load light effect
   
/ * Light * / var Light, Light2, Light3; Function Initlight () {// Parallel light Light = New Three.directionallight (0xfffffff)F); light.position.set (0, 99, 0) .NORMALIZE (); Scene.Add (Light); // Environment Light2 = New Three.Ambientlight (0x99999); Scene.Add (Light2); // Point light source Light3 = new three.pointlight (0x00FF00); Light3.Position.set (300, 0, 0); Scene.Add (Light3);}


Display model Object:
   / * Display Object * / var Cube; function initObject () {// ASCII file var loader = new three.stlloader (); loader. addEventListener ( 'load', function (event) {var loading = document.getElementById ( "loading"); loading.parentNode.removeChild (loading); var geometry = event.content; // brick red var material = new THREE.MeshPhongMaterial ({Ambient: 0xff5533, Color: 0xff5533, Specular: 0x111111, shininess: 200}); // Pure black //var material = new THREE.MeshBasicMaterial ({envMap: THREE.ImageUtils.loadTexture ( 'http: // localhost: 8080 / textures / metal.jpg', new THREE.SphericalReflectionMapping ()), overdraw: true}); // Pink With shadow // var Material = new three.meser {color: 0xff5533, side: three.doubleside}; // Gray // var Material = new three.melambertMaRial ({color: 000000}); // Material setting (color) var mesh = new THREE.Mesh (geometry, material); var center = THREE.GeometryUtils.center (geometry); var boundbox = geometry.boundingBox; var vector3 = boundbox.size (null); var vector3 = boundbox. SIZE (NULL); console.log (Vector3); var scale = vector3.Length (); Camera.Position.Set (Scale, 0, 0); Camera.Lookat (Scene.Position); Scene.Add (CAMERA); // Use an axis object to a simple manner with a visual 3 axis. The x-axis is red. The Y-axis is green. The z-axis is blue. This helps understand the direction of all three axes in space. var axisHelper = new THREE.AxisHelper (800); scene.add (axisHelper); // border around bboxHelper = new THREE.BoxHelper (); bboxHelper.visible = true; var meshMaterial = material; mainModel = new THREE.Mesh (geometry , Meshmaterial; bboxhelper.Update (mainmodel); bboxhelper.geometry.computeBoundingBox (); Scene.Add (bboxhelper); // Floor grid // var GridHelper = new Three.GridHelper (500, 40); // 500 IS Grid size, 20 is grid step // gridhelper.position = new three.vector3 (0, 0, 0); // GridHelper.Rotation = New Three.euler (0, 0, 0); // Scene.Add (GridHelper ); // var gridhelper2 = GridHelper.clone (); // gridhelper2.Rotation = new three.euler (math.pI / 2, 0, 0); // Scene.Add (GridHelper2); // var gridhelper3 = GridHelper.clone (); // GridHelper3.Rotation = New Three.euler (Math.Pi / 2, 0, Math. PI / 2); // Scene.Add (GridHelper3); //// var grid = New Three.gridHelper (300, 40, 25, [0, 0, 1], 0x000055, 0.2, true, "#ffffff" , "left"); // scene.add (grid); var x = (boundbox.max.x - boundbox.min.x) .tofixed (2); var y = (boundbox.max.y - boundbox.min .tofixed (2); var z = (Boundbox.max.z - boundbox.min.z) .tofixed (2); console.log (x); console.log (y); console.log (z ); console.log (boundbox); mesh.position.set (0, 0); // Mesh.position.x = Scene.Position.x; // Mesh.position.y = Scene.Position.y; // Mesh.position.z = Scene.Position.z; Scene.Add (Mesh);Renderer.clear (); renderer.render (Scene, Camera);}; loadinger.load ('3DFile / Mobius .stl');} 


This is the STL model, so I will introduce the STL model according to the file type selection, so I introduced STLLOADER.JS

   


If you need to display the grid ruler to remove the grid part of the code can be
 is a control method (although I am not displayed The code is written in accordance with the keyboard button to zoom in, but it is also available to the reference)    // control VAR Effect; var controls; function initcontrol () {Effect = New Three.asciieffect (renderer); Effect.setsize (width, height); controls = new three.trackballControls (Camera, rendere.domelement);}  

The last is an initial Call

Function Animate () {RequestaniMationFrame (animate); controls.Update (); Effect.render (Scene, CameRa);} function threeestart () {infitthree (); initscene (); initCamera (); infit (); initObject (); infitControl (); animate (); itControl (); animate ();}

 Attached full code   

WebGL

   Body {Overflow: hidden; background: #eee} 
Var Width, Height; Var Rendere; Function initThree () {WIDTH = document.documentElement.clientWidth / 2;


HEIGHT = document.documentElement.clientHeight / 2; / * renderer * / renderer = new THREE.WebGLRenderer (); renderer.setSize (WIDTH Height; renderer.SetClearColor (New Three.color); renderer.gammainput = true; renderer.gammaoutput = true; document.body.appendChild (renderer.domElement);} / * camera * / var camera; function initCamera () {var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000; camera = new THREE.PerspectiveCamera (VIEW_ANGLE, Aspect, Near, FAR); Camera.Position.Set (20, 0, 0); // Set the center coordinate of the field of view Camera.Lookat (Scene.Position);} / * Scene * / var scene; function initscene () { Scene = new three.scene ();} / * light * / var Light, Light2, Light3; Function Init () {// Parallel light Light = New Three.directionallight (0xfffff); Light.Position.set (0, 99 , 0) .NORMALIZE (); Scene.Add (Light); // Environment Light Light2 = New Three.Ambientlight (0x99999); Scene.Add (Light2); // Point Light Light3 = New Three.Pointlight (0x00FF00); Light3.position.set (300, 0, 0)Scene.Add (Light3);} / * Display Object * / var Cube; function initObject () {// ascii file var loader = new three.stlloader (); loader.addeventListener (‘load’, function (event) { var loading = document.getElementById ( “loading”); loading.parentNode.removeChild (loading); var geometry = event.content; // brick red var material = new THREE.MeshPhongMaterial ({ambient: 0xff5533, color: 0xff5533, specular : 0x111111, Shininess: 200}); // Pure Black // Var Material = New Three.meshbasicMaRial ({Envmap: Three.ImageUtils.LoadTexture (‘http: // localhost: 8080 / textures / metal.jpg’, New Three .SphericalReflectionMapping (), overdraw: true}; // Pink with shadow // var Material = new three.meselambertmaterial ({Color: 0xff5533, side: three.doubleside});// Gray // var Material = new three.meshlambertmaterial ({color: 000000}); // Material setting (color) var mesh = new three.mesh (geometry, matial); var center = three.geometryUtils.Center Geometry); var boundbox = geometry.BoundingBox; var vector3 = boundbox.size (null); var vector3 = boundbox.size (null); console.log (Vector3); var scale = vector3.length (); Camera.Position. Set (Scale, 0, 0); Camera.lookat (Scene.Position); Scene.Add (Camera); // With an axis object to a visual 3 axis in a simple way. The x-axis is red. The Y-axis is green. The z-axis is blue. This helps understand the direction of all three axes in space. VAR axishelper = new three.Axishelper (800); Scene.Add (Axishelper); // surrounding border bBOXHELPER = new three.boxhelper (); bboxhelper.visible = true; var meshmaterial = matial; mainmodel = new three.mESH (Geometry, Meshmaterial); BBOXHELPER.UPDATE (Mainmodel); bboxhelper.geometry.computeBoundingBox (); Scene.Add (BBOXHELPER); // Floor Grid // Var GridHelper = New Three.GridHelper (500, 40); / / 500 is Grid Size, 20 is Grid Step // GridHelper.Position = New Three.vector3 (0, 0); // GridHelper.Rotation = New Three.euler (0, 0, 0); // Scene. Add (gridhelper); // var gridhelper2 = gridhelper.clone (); // gridhelper2.Rotation = new three.euler (math.pi / 2, 0); // Scene.Add (GridHelper2); // var GridHelper3 = GridHelper.clone (); // GridHelper3.Rotation = new three.euler (math.pi / 2, 0, math.pi / 2); // Scene.Add (GridHelper3); //// var grid = New Three.GridHelper (300, 40, 25, [0, 0, 1], 0x000055, 0.2, True, “#ffffff”, “left”)// Scene.Add (Grid); var x = (Boundbox.max.x – boundbox.min.x) .tofixed (2); var y = (boundbox.max.y – boundbox.min.y) .tofixed (2); var z = (Boundbox.max.z – boundbox.min.z) .tofixed (2); console.log (x); console.log (y); console.log (z); console.log (Boundbox); Mesh.Position.Set (0, 0, 0); // Mesh.Position.x = Scene.Position.x; // Mesh.position.y = Scene.Position.y; // Mesh.position .z = Scene.Position.z; Scene.Add (Mesh); renderer.clear (); renderer.Render (Scene, Camera);}; loadinger.load (‘3DFile / Mobius ring .stl’) ;} // Control Var Effect; var controls; function initcontrol () {Effect = new three.asciIEffect (rendere); Effect.setsize; controls = new three.trackballControls (camera, renderer.domElement);} function animate () {requestAnimationFrame (animate); controls.update (); effect.render (scene, camera);} function threeStart () {initThree (); initScene (); initCamera () InitLight (); INITOBJECT (); INITCONTROL (); Animate ();}

Loading …
        Oh my file structure     If a small partner you want all files can leave a message       Supplements, because I joined BBOXHELPER = new three.boxhelper () in the way of displaying model, we can get the size of the XYZ three-axis of the model can also be used as a model of the model. High    The above is all the content of this article, I hope that everyone's learning is helpful, and I hope that you will support Tumi Clouds.                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment