Threejs系列--1入门
序言
随着科技发展，人们对应用交互效果越来越高，我们希望简单的平面交互能使用更多的3D交互效果代替，为了能在短时间内完成炫酷的效果，这便是本系列文章的目的。准备好秃头了吗？少年 ^ 0 ^
Treejs简介
threejs是基于原生
WebGL封装运行的三维引擎。可以使用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。
学习Treejs需要了解的基本知识
在上面的解析中，你可能get到了很多陌生信息，天哪~~好感兴趣。
WebGL: Web图形库，是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。
至于为什么不去直接使用WebGL编写我们的游戏…小伙子太难了，如果你有良好的数学功底，那还有戏。比如很多半路出家的程序员，emmmmm线性代数应该没学过。
三维场景： 我们将在一个区域内展示我们的游戏，控制区域内元素的三维坐标，这个游戏区域就是我们的三维场景了。
摄影机：相机就像你生活中使用的相机一样可以拍照，只不过一个是拍摄真实的景物，一个是拍摄虚拟的景物，拍摄一个物体的时候相机的位置和角度需要设置，虚拟的相机还需要设置投影方式。
渲染器：当我们创建好三维场景与设置好摄像机后，就可以通过渲染器执行拍照动作，完成一次内容显示。
材质： 就像生活中我们说的材质一样，通过程序我们可以反映这个物体为塑料材质，这是金属材质，这是纤维材质…
光源：就是我们生活中的光源，不过我们在程序中可以对它进行各种设置，例如光源位置、颜色、明暗等。
Threejs使用基本步骤
记住这几步，最起码是一名合格的码农，可批量生产矩形或圆形等简单图形，然后为复杂场景学习做好铺垫。
- 引入three.js文件
- 游戏内各元素设置
a. 创建游戏内各元素
b. 创建各元素材质
c. 创建用于呈现各元素与体现材质的模型 - 光源设置（可有可无）
a. 创建光源点，添加至场景中
b. 创建环境光，添加至场景中 - 相机设置
a. 创建相机，添加至场景中 - 游戏渲染
a. 创建渲染器
b. 设置渲染器大小
c. 渲染器添加到页面中
d. 渲染
一个例子来体会体会吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D立方体</title>
<script src="three.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
//1. 创建场景
var scene = new THREE.Scene();
//2. 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//2.1 可以适当调整相机位置
camera.position.z = 6;
//3. 创建立方体
var geometry = new THREE.BoxGeometry(1, 1, 1);
//3.1 创建材质
var material = new THREE.MeshBasicMaterial({
color: 0x00CE47
})
//3.2 创建网格 包含立方体与立方体上的材质
var cube = new THREE.Mesh(geometry, material);
scene.add(cube)
//4. 创建渲染器
var renderer = new THREE.WebGLRenderer();
//4.1 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
//4.2 将渲染器添加到页面中
document.body.appendChild(renderer.domElement);
//4.3 渲染循环、动画循环
var animate = function(){
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</html>
775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
