three.js 入门案例

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