科技热线
搜索
  1. 首页
  2. 列表
  3. 焦点
  4. 内容详情

环球观察：three.js新手入门教程

来源：东方资讯

three.js就是使用javascript 来写3D程序。

在浏览器端，WebGL 是一个底层的标准，在这些标准被定义之后，Chrome、Firefox之类的浏览器实现了这些标准。然后，就能通过 JavaScript 代码，在网页上实现三维图形的渲染了。ThreeJS则是封装了底层的图形接口，更容易来实现3D程序。

核心


【资料图】

WebGL 的渲染是需要 HTML5 Canvas 元素的，所以需要在 部分中定义Canvas 元素，或者使用 js 生成。

一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。

渲染器

渲染器将和 Canvas 元素进行绑定，如果在 HTML 中手动定义了Canvas 元素，那么 Renderer 可以这样写：

var renderer = new THREE.WebGLRenderer({

canvas: document.getElementById("#mainCanvas")

});

如果想要 Three.js 生成 Canvas 元素，在 HTML 中就不需要定义 Canvas 元素，在JavaScript 代码中可以这样写：

var renderer = new THREE.WebGLRenderer();

renderer.setSize(400, 300); // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度

document.getElementsByTagName("body")[0].(renderer.domElement);

场景

在 Three.js 中添加的物体都是添加到场景中的，因此它相当于一个大容器。在程序最开始的时候进行实例化，然后将物体添加到场景中即可。

var scene = new THREE.Scene();

标签： 新手入门

推荐

财富更多》

动态更多》

热点