Three.js

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 ); // setSize 
document.body.appendChild( renderer.domElement );

PerspectiveCamera 场景

现在已经设置好了场景,相机,渲染器。 three  有几个不同的渲染器, 我们使用 PerspectiveCamera.

1. 第一个属性是视野, FOV 是任何给定时刻显示器上看到的场景的范围。该值以度为单位。

2. 第二个是设置宽高,

3. 第三个属性与第四个属性是近和远裁剪平面。这意味着,远离相机和物体远远超过或接近近处的物体不会被渲染,

WebGLRenderer 渲染器

 除了 webGLRenderer 之外 还有其他一些功能,通常用作旧版浏览器的用户的回退功能,或者由于某些原因而无法支持 WebGL 的用户。

添加到页面

我们将 renderer 元素添加到 HTML 文档中。这是渲染器用来向我们显示场景的 <canvas> 元素。

setSize 

除了创建渲染器实例外,设置 程序显示的实际大小,如果想保持应用程序的大小,但以较低的分辨率渲染它,可以通过 false 作为 updateStyle (第三个参数)调用 setSize 来实现,例如 setSize(window.innerWidth / 2, window.innerHeight / 2, false)

发表评论

邮箱地址不会被公开。 必填项已用*标注