three.js 入门案例详解

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

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

首先我们要知道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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。