Heim > Web-Frontend > js-Tutorial > Hauptteil

Three.js-Tutorial für die ersten Schritte

小云云
Freigeben: 2018-01-24 09:30:55
Original
3759 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Einstiegsfälle von three.js vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vor kurzem musste das Unternehmen tree.js verwenden, um ein 3D-Bild anzuzeigen, also habe ich die offizielle Dokumentation gelesen und es aufgezeichnet, als ich Zeit hatte.

Da das Front-End-Framework unseres Unternehmens Angular verwendet, habe ich meine Treejs in einer Direktive gekapselt. Der Quellcode wird später veröffentlicht

Zunächst müssen wir die Download-Adresse von three.js kennen. Die Adresse lautet: https://github.com/mrdoob/ three.js.

Zweitens: Was ist Three.js?

Mehrere Schritte für three.js:

1: Führen Sie die Datei three.js ein (öffnen Sie das Debugging-Fenster und geben Sie den Befehl THREE.REVISION unter der Konsole ein, um sie abzurufen die Versionsnummer, erfolgreich)

2: Setze eine Szene // var scene = new THREE(); innerWidth /window .innerHeight, 0.1, 1000); Richten Sie eine Perspektivkamera ein

4: var renderer = new THREE. setSize(window.innerWidth, window.innerHeight); >

5: Fügen Sie der Szene ein Objekt hinzu

modelUrl ist die hinzugefügte Datei. Zum Beispiel: $scope = cy3DView;

6: Rendering

$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(); 
 }); }
Nach dem Login kopieren

ok Ist das ganz einfach? Freunde, die das nicht tun Ich verstehe nicht, kann eine private Nachricht senden. Mein


Quellcode lautet wie folgt:

renderer.render(scene, camera);
Nach dem Login kopieren

Verwandte Empfehlungen:


(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 === &#39;KeyL&#39;) {
        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);
Nach dem Login kopieren
Three.js grundlegendes Einführungslern-Tutorial


Detaillierte Erklärung, wie man eine Szeneninstanz mit three.js erstellt

Detaillierte Erklärung wie man three.js lokal ausführt

Das obige ist der detaillierte Inhalt vonThree.js-Tutorial für die ersten Schritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!