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 相关文章推荐
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
微信小程序实现电子签名并导出图片
May 27 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 set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
python实现复制整个目录的方法
2015/05/12 Python
Python实现句子翻译功能
2017/11/14 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
秋季运动会活动方案
2014/02/05 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
医师定期考核实施方案
2014/05/07 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
网络研修随笔感言
2015/11/18 职场文书
小学班级管理心得体会
2016/01/07 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
浅谈Node的内存泄露问题
2022/05/06 NodeJs