Javascript库：three.js库的基础知识介绍

迪鲁宾
661 阅读3分钟

Three.js基础教程

在这篇文章中，我们将通过一个例子来介绍three.js库的基础知识。

Three.js的javascript开源库可以在浏览器中生成和渲染3D内容。这个API提供了使用canvas、SVG和WebGL功能在HTML页面中渲染三维和二维图像。如果浏览器支持webGL()，它就会使用webGL()将内容渲染到浏览器中。如果浏览器不支持，则使用html5画布或SVG功能渲染内容。通常情况下，生成和渲染全功能的3D内容是非常困难的，因为我们必须使用WebGL或我们必须编写代码，这个库允许开发人员简化3D内容的渲染。

Three.js对开发者的优势

  • 完全独立的Javascript API，没有依赖性，只需要浏览器支持WebGL，因为大多数最新的网络和移动浏览器都支持WebGL。
  • 桌面和手机上的所有主要最新浏览器
  • 它用Javascript API创建3D模型
  • 支持所有的3D模型--几何、灯光、材料、相机，还提供对象的导出/导入。
  • 社区支持
  • 不需要插件，不依赖客户端

安装和设置

使用脚本标签或CDN文件

从这里下载获得库。将其包含在你的头部HTML标签的脚本标签中，这是使用该库的简单方法。

另一种方法是使用CDN库的URL。在这两种情况下，请使用最小化的版本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>  
<script src="lib/three.min.js"></script>

使用 nodejs npm 包
这是在 node 环境中使用 three.js 的另一个过程。首先，你需要安装这个库，并将其作为一个模块导入。

npm install --save three

Nodejs的使用实例

我们已经通过rpm包管理器安装好了，接下来就是导入three.js模块，使用require函数，所有的对象都可以使用，你也可以使用es6语法导入模块，如下所示

var THREE = require('three');  
or   
import * as THREE from 'three';  
import { Scene } from 'three';  
var mainScene = new THREE.Scene();

一旦导入，你就可以访问这个库的所有对象了 你好世界的例子 在这个教程中，我们将通过简单的你好世界的例子和各种对象的用法进行讲解 这里是使用这个库的示例代码

  
  <!DOCTYPE html>  
<html>  
   <head>  
      <title>Basic Three.js App</title>  
      <style>  
         body { margin: 0; }  
         canvas { width: 100%; height: 100% }      
      </style>  
   </head>  
   <body>  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>  
      <script>  
         // Javascript will go here.  
      </script>  
   </body>  
   <script>  
      var scene = new THREE.Scene();  
        
      var camera = new THREE.PerspectiveCamera( 25, window.innerWidth/window.innerHeight, 0.1, 1000 );  
      camera.position.z = 4;  
        
      var renderer = new THREE.WebGLRenderer({antialias:true});  
        
      renderer.setClearColor("#0ffff0");  
        
      renderer.setSize( window.innerWidth, window.innerHeight );  
        
      document.body.appendChild( renderer.domElement );  
        
        
      var geometry = new THREE.BoxGeometry( 1, 1, 1 );  
      var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );  
      var cube = new THREE.Mesh( geometry, material );  
        
      // Add cube to Scene  
      scene.add( cube );  
        
      // Render Loop  
      var render = function () {  
        requestAnimationFrame( render );  
        
        cube.rotation.x += 0.01;  
        cube.rotation.y += 0.01;  
        
        // Render the scene  
        renderer.render(scene, camera);  
      };  
        
      render();  
          
   </script>  
</html>

以下是上述代码的输出

three.js library hello world javascript

使用这个库，有各种全局变量--渲染的、场景的、相机的，首先你需要在窗体/窗口加载时初步创建这些对象。 首先，你需要创建一个场景对象，它容纳所有的对象。

var scene = new THREE.Scene();

接下来是创建一个WebGLRenderer--用来向浏览器渲染屏幕对象。

var renderer = new THREE.WebGLRenderer({antialias:true});

在创建了渲染对象之后，你需要创建一个摄像头对象，这是一个在浏览器上看到的可见组件。

var camera = new THREE.PerspectiveCamera( 25, window.innerWidth/window.innerHeight, 0.1, 1000 );

一旦我们创建了所有的全局对象，接下来就是添加不同的元素，这里创建了一个几何体并添加了网格 我们创建了要渲染的BOX立方体，它有三维属性--宽度、高度和深度

var geometry = new THREE.BoxGeometry( 1, 1, 1 );  
var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );  
var cube = new THREE.Mesh( geometry, material );

Rendered.render()方法被用来将场景渲染到浏览器上。

我们如何检查浏览器是否支持WebGL？
要渲染3D场景，首先，我们需要检查浏览器是否支持WebGL。如果WebGL不被支持，我们将默认使用HTML5画布或SVG功能。检测器的代码可以从这里找到

if (Detector.webgl) {  
// WebGL is supported  
  
} else {  
// webglo is not supported in browser.  
}

这个库支持各种类型的3D模型--GLTransimission Format、FBX、Collada或OBJ。

浏览器支持

WebGL是在浏览器中显示3D模型的默认渲染机制。它支持所有最新的浏览器，包括Internet Explorer、Firefox、Chrome、Safar和android的所有浏览器都支持WebGL。对于旧的浏览器，你必须使用SVGRenderer,CanvasRendere类来支持html5 SVG和Canvas。

avatar
文章
阅读
粉丝