three.js 入门案例详解


Posted in Javascript onJanuary 23, 2018

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

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

Javascript 相关文章推荐
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
常用jQuery代码分享
Jul 14 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 #Javascript
vuex的使用及持久化state的方式详解
Jan 23 #Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 #jQuery
js 实现复选框只能选择一项的示例代码
Jan 23 #Javascript
Vue 换肤的示例实践
Jan 23 #Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 #jQuery
Vue 拦截器对token过期处理方法
Jan 23 #Javascript
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
对之前写的jquery分页做下升级
2014/06/19 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python的Django框架安装全攻略
2015/07/15 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python程序运行原理图文解析
2018/02/10 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
Python面试题集
2012/03/08 面试题
网络妈妈观后感
2015/06/08 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
导游词幽默开场白
2019/06/26 职场文书
PHP解决高并发问题
2021/04/01 PHP
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android