three.js 入门案例

最近公司需要用tree.js实现一个3D图的显示，就看了官方文档，正好有时间，就记录下来。

由于我们公司的前端框架用的是angular，所以我就把我的treejs封装在一个directives里面。后面放源码

首先我们要知道three.js的下载地址它的地址是： https://github.com/mrdoob/three.js。

其次，什么是three.js？

three.js的几个步骤：

1：引入three.js文件（打开调试窗口，并在Console下输入 THREE.REVISION命令，得到版本号，成功）

2：设置一个场景//var scene = new THREE.Scene();

3：var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)；设置一个透视相机
4：var renderer = new THREE.WebGLRenderer();   renderer.setSize(window.innerWidth, window.innerHeight); 设置一个渲染器

5：把一个物体添加到场景中

modelUrl是所添加文件例如：

$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(geometry);      
   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：渲染

renderer.render(scene, camera);

ok 是不是很简单，个人认为是这样，没有看懂的小伙伴可以私信我哦

源码如下：

(function (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,fillLight,backLight,spotLight,lighting;        
     function config() {             //设置3D图的宽和高           
             width = document.getElementById('canvas').clientWidth;         
             height = document.getElementById('canvas').clientHeight; 
             renderer = new THREE.WebGLRenderer({    
             antialias: true    
              });     
            renderer.setSize(width, height);          
            renderer.shadowMapEnabled = true;        
     　　　　　document.getElementById('canvas').appendChild(renderer.domElement);    
            renderer.setClearColor(0xFFFFFF, 1.0);        
            scene = new THREE.Scene();       
            lighting = false;              //设置3D图的颜色         
             ambient = new THREE.AmbientLight(0xffffff, 1.0);        
            scene.add(ambient);           
           keyLight = new THREE.DirectionalLight(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(0xffffff, 1.0);      
          backLight.position.set(100, 0, -100).normalize();      
           spotLight = new THREE.SpotLight(0xffffff);             
          spotLight.position.set(150, 150, 150);             
          scene.add(spotLight);                //照相机配置            
            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) {  //判断浏览器IE，谷歌滑轮事件         
        if (e.wheelDelta > 0) { //当滑轮向上滚动时                
            fov -= (near < fov ? 1 : 0);             }        
         if (e.wheelDelta < 0) { //当滑轮向下滚动时 
                fov += (fov < far ? 1 : 0);             }  
       } else if (e.detail) {  //Firefox滑轮事件             
        if (e.detail > 0) { //当滑轮向上滚动时            
     fov -= 1;             }
             if (e.detail < 0) { //当滑轮向下滚动时                 fov += 1;             }         }  
       camera.fov = fov;
         camera.updateProjectionMatrix();
         renderer.render(scene, camera);     }
        function onWindowResize() {
        camera.aspect = width / height;        
      camera.updateProjectionMatrix();
          renderer.setSize(width,height);      }
        function onKeyboardEvent(e) {
        if (e.code === 'KeyL') {
            lighting = !lighting; 
             if (lighting) {
                ambient.intensity = 0.25;
                 scene.add(keyLight);
                 scene.add(fillLight);
                 scene.add(backLight);
              } else {
                ambient.intensity = 1.0;
                 scene.remove(keyLight);
                 scene.remove(fillLight);
                 scene.remove(backLight);
              }
        }
    }
        function plan(modelUrl) {
                 stlLoader = new THREE.STLLoader();
                 group = new THREE.Object3D();
                 stlLoader.load(modelUrl, function (geometry) { 
                //console.log(geometry);
                 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();
             });         }
        function animation(){
            renderer.render(scene, camera);
             requestAnimationFrame(animation);          }
        return {
             config: config,
             plan: plan,

 };  
   } })(window, document);