欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

three.js 入门案例详解

程序员文章站 2022-08-09 23:23:21
最近公司需要用tree.js实现一个3d图的显示,就看了官方文档,正好有时间,就记录下来。 由于我们公司的前端框架用的是angular,所以我就把我的treejs封装在一...

最近公司需要用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);

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