three.js 入門案例詳解，three.js案例詳解

three.js 入門案例詳解，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，Google滑輪事件           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);

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。