溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

three.js 入門案例詳解

發(fā)布時(shí)間：2020-10-07 04:49:08 來源：腳本之家 閱讀：176 作者：蘑小De菇 欄目：web開發(fā)

最近公司需要用tree.js實(shí)現(xiàn)一個(gè)3D圖的顯示，就看了官方文檔，正好有時(shí)間，就記錄下來。

由于我們公司的前端框架用的是angular，所以我就把我的treejs封裝在一個(gè)directives里面。后面放源碼

首先我們要知道three.js的下載地址它的地址是： https://github.com/mrdoob/three.js。

其次，什么是three.js？

three.js的幾個(gè)步驟：

1：引入three.js文件（打開調(diào)試窗口，并在Console下輸入 THREE.REVISION命令，得到版本號(hào)，成功）

2：設(shè)置一個(gè)場(chǎng)景// var scene = new THREE. Scene();

3： var camera = new THREE. PerspectiveCamera( 75, window.innerWidth /window.innerHeight, 0.1, 1000)；設(shè)置一個(gè) 透視相機(jī)
4： var renderer = new THREE. WebGLRenderer();   renderer. setSize(window.innerWidth, window.innerHeight); 設(shè)置一個(gè)渲染器

5：把一個(gè)物體添加到場(chǎng)景中

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 是不是很簡(jiǎn)單，個(gè)人認(rèn)為是這樣，沒有看懂的小伙伴可以私信我哦

源碼如下：

(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() {
      //設(shè)置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; //設(shè)置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); //照相機(jī)配置   
      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) { //當(dāng)滑輪向上滾動(dòng)時(shí)    
          fov -= (near < fov ? 1 : 0);
        }
        if (e.wheelDelta < 0) {
          //當(dāng)滑輪向下滾動(dòng)時(shí)   
          fov += (fov < far ? 1 : 0);
        }
      } else if (e.detail) {
        //Firefox滑輪事件   
        if (e.detail > 0) {
          //當(dāng)滑輪向上滾動(dòng)時(shí)   
          fov -= 1;
        }
        if (e.detail < 0) {
          //當(dāng)滑輪向下滾動(dòng)時(shí)    
          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);

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手