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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
详解vue-router导航守卫
Jan 19 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
js实现滑动进度条效果
Aug 21 Javascript
js实现拖拽元素选择和删除
Aug 25 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运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
用js实现放大镜效果
2020/10/28 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python实现3D地图可视化
2020/03/25 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
活动总结新闻稿
2014/08/30 职场文书
免职证明样本
2014/10/23 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书