使用 three.js 在 Web 上实现 3D

• 下载演示 - 120.2 KB

引言

随着HTML5的引入，我们可以在 Web 上做无限的事情，例如播放音频、视频等。问题是 - 我们是否可以开发可以在浏览器上运行的 3D 内容。如果我们能使用 Web 技术开发 3D 游戏、3D 标志、完整的 3D 网站并在浏览器上运行它，那将非常酷。

答案是肯定的，我们可以 - HTML5提供了一个名为 WebGL 的 3D 库 - 代表 Web 图形库。

但问题是 Web 开发人员不了解 3D，要在 3D 中创建内容 - 必须具备 3D 的基本理论知识和 3D 编程知识，这不是一件容易的事情，需要花费大量时间来学习和创建内容。

因此，解决方案是使用现有的库，它可以使事情变得简单，这就是 three.js 的用武之地

Three.js 是一个使用 Webgl 的 javascript 库。它用于在 Web 浏览器中创建和显示 3D 计算机图形。

背景

您应该具备以下基础知识：

• HTML5
• CSS
• JavaScript
• 一些 3D 基础知识（可选）

使用代码

安装 three.js

• 从 github 下载 three.js.
• 转到下载文件夹，然后构建并复制 three.min.js 文件，并将其粘贴到我们的工作目录中，例如 3ddemo。
• 将该脚本添加到我们的 html 页面中。

3D 简介

一个 3D 世界由多个元素组成，但其中一些元素对于启动 3D 世界是必不可少的。这些元素是：

• 相机（用于查看对象 - 充当眼睛）
• 一个场景
• 一个对象 - 立方体、圆柱体、瓶子、船等。
• 渲染器 - 负责显示对象

在 three.js 中，一个对象有三个部分：

1. 材质 - 例如 - 颜色
2. 几何体 - 例如 - 立方体、圆柱体
3. 网格 - 它采用几何体和材质并形成一个对象。

例如 - 如果你想要一个颜色为红色（材质）的立方体（几何体），那么网格将采用几何体 - 立方体并将其涂成红色。

一个基本场景

初始化四个变量 - camera, scene, object, renderer

var Camera; 
var Scene; 
var Cube;
var Renderer;

创建一个由一个红色方框组成的基本场景

function InitScene()
{

  Scene = new THREE.Scene();

  //creating the camera
  var Fov=75; //it acts like camera lens
  var AspectRatio=window.innerWidth / window.innerHeight;
  var Near=1; //Set camera to see the objects- how much near
  var Far=10000; //set camera to see the objects- how much far
  Camera = new THREE.PerspectiveCamera( Fov, AspectRatio, Near,Far);
  Camera.position.z = 1000;
  
  //creating a render of size equal to our screen size
  Renderer = new THREE.WebGLRenderer();
  Renderer.setSize( window.innerWidth, window.innerHeight );

  geometry = new THREE.BoxGeometry( 200, 200, 200 );
  material = new THREE.MeshBasicMaterial( { color: 'red'} );
  Cube = new THREE.Mesh( geometry, material );
  
  Scene.add( Cube);

  document.body.appendChild( Renderer.domElement );

}

更新场景

function UpdateScene()
{
    //calling again UpdateScene to update the objects
    requestAnimationFrame( UpdateScene );
    
    //Render the objects
    Renderer.render( Scene, Camera );
}

现在我们需要调用上面的方法

    //first call init method
    InitScene();
    //call update method which will (render)create an object on the screen 
    UpdateScene();

运行上面的代码后，您会看到上面的代码将在我们的场景中创建一个红色立方体。

但是没有动画的 3D 世界看起来并不好，所以让我们旋转我们的立方体。为了看到旋转效果，我们必须在 UpdateScene 方法中编写我们的代码，因为这是渲染对象的部分。所以让我们更新 UpdateScene 方法。

function UpdateScene()
{
    //calling again UpdateScene to update the objects
    requestAnimationFrame( UpdateScene );
    
    //Update the object rotation
    Cube.rotation.x += 0.01;
    Cube.rotation.y += 0.02;
    
    //Render the objects
    Renderer.render( Scene, Camera );
}

现在，我们的背景颜色看起来不太好。所以让我们改变它 -

要更改背景颜色，我们必须向渲染器添加一个属性 - setClearColor 意味着我们必须更新 initscene 方法。

function InitScene()
{

  Scene = new THREE.Scene();

  //creating the camera
  var Fov=75; //it acts like camera lens
  var AspectRatio=window.innerWidth / window.innerHeight;
  var Near=1; //Set camera to see the objects- how much near
  var Far=10000; //set camera to see the objects- how much far
  Camera = new THREE.PerspectiveCamera( Fov, AspectRatio, Near,Far);
  Camera.position.z = 1000;
  
  //creating a render of size equal to our screen size
  Renderer = new THREE.WebGLRenderer();
  Renderer.setSize(window.innerWidth, window.innerHeight);

  Renderer.setClearColor('#82CAFA');
  geometry = new THREE.BoxGeometry( 200, 200, 200 );
  material = new THREE.MeshBasicMaterial( { color: 'red'} );
  Cube = new THREE.Mesh( geometry, material );
  
  Scene.add( Cube);

  document.body.appendChild( Renderer.domElement );

}

哇，你刚刚在浏览器中创建了一个 3D 世界。

你能做什么

• 您可以使用 javascript 和 three.js 创建 3D 游戏。
• 您可以使用 3D 让您的网站更酷。
• 您可以在 3D 中创建 UI。
• 还有更多...