three.js中文文档学习之创建场景

日期：2020-05-11 栏目：程序人生浏览：次

什么是Three.js？

如果你正在读这篇文章，你可能对Three.js有一定的了解，那我们来简单地介绍下Three.js是什么.
Three.js是一个库，使得WebGL的3D效果在浏览器中运用很容易。而在原始的WebGL中一个简单的立方体会变成数百Javascript和着色器代码的行，而一个Three.js只需要一点点代码.

本节目标是为 three.js 做简介。我们从使用旋转立方体来搭建场景开始。如果遇到困难需要帮助，页面底部有可参考的源码。

一个场景至少需要的三种类型组件

相机/决定哪些东西将在屏幕上渲染
光源/他们会对材质如何显示，以及生成阴影时材质如何使用产生影响
物体/他们是在相机透视图里主要的渲染队形：方块、球体等

开始前

在计算机中保存如下 HTML 代码，并在 js 目录下包含 three.js，然后在浏览器中打开

<html>
 <head>
 <meta charset=utf-8>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  // Our Javascript will go here.
 </script>
 </body>
</html>

接下来的代码都会下载 script 标签中

创建示例场景

为了利用three.js来进行展示，我们需要三种元素：场景，摄像机，渲染器，以便来渲染摄像机中的场景。

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

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

让我们花点时间来解释发生了什么。我们现在创建了场景，摄像机和渲染器。

在 three.js 中有几种摄像机。我们暂时用的是 PerspectiveCamera （透视摄像机）

它的第一个属性是视图角（FOV)，它是能看见的视图范围，其值表示角度大小。

第二个属性是宽高比。大多数情况你想要使用被高除过之后的宽度，不然会发生像在宽屏电视上放旧电影的情况 —— 图像看起来被压扁了。

后面两个属性是近景面和远景面。只会渲染这两个面之间的区域。目前你不必关心这些，使用这些参数能提高性能。

接下来谈谈渲染器。这便是神奇之处。除了我们这里用的 WebGLRenderer 外， three.js 还提供一些渲染器用在不支持 WebGL 的老旧浏览器上。

转载注明出处：http://www.heiqu.com/695.html

three.js中文文档学习之创建场景

相关推荐