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 相关文章推荐
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
基于JSON数据格式详解
Aug 31 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
浅析php单例模式
2014/11/25 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
JS画线(实例代码)
2013/11/20 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
python计算auc指标实例
2017/07/13 Python
如何用python批量调整视频声音
2020/12/22 Python
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
简历中的自我评价范文
2014/02/05 职场文书
七匹狼男装广告词
2014/03/21 职场文书
体育之星事迹材料
2014/05/11 职场文书
房地产广告策划方案
2014/05/15 职场文书
博士生专家推荐信
2014/09/26 职场文书
科技活动总结范文
2015/05/11 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
使用Redis做预定库存缓存功能
2022/04/02 Redis