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中通过URL传递汉字的方法
Apr 09 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
js实现计算器功能
Aug 10 Javascript
javascript实现多边形碰撞检测
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购物网站支付paypal使用方法
2010/11/28 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
3种python调用其他脚本的方法
2020/01/06 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
挂职思想汇报
2013/12/31 职场文书
公司成立感言
2014/01/11 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
信访工作经验交流材料
2014/05/23 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
争先创优活动总结
2014/08/27 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL