html 场景创建,【three.js】入门1 - 创建场景

创建一个场景

本文的目的是简单介绍一下three.js，我们将会创建一个旋转管道的场景。文章底部提供了一个可运行的案例以防初学者遇到问题需要帮助。

创建之前

在你使用three.js之前，你需要先把下面的HTML文档以及js目录下的three.js保存在你的电脑里。

My first three.js app

body { margin: 0; }

canvas { width: 100%; height: 100% }

// Our Javascript will go here.

也就这么点东西，你所需要做的就是把你的代码写在标签里面。

创建场景

实际上想要使用three.js，我们所需要的也就是三个东西：scene(场景)、camera(摄像头)、renderer(渲染器)，然后我们就可以通过摄像头来渲染场景了。

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 );

首先我们花多点时间解释一下上面的代码都是什么意思。我们现在创建了场景(scene)、摄像头(camera)以及渲染器(renderer)。 three.js里面有很多类型的摄像头(camera)。我们现在使用的是PerspectiveCamera。