开始第一个Hello world!
Demo查看
Threejs介绍
threejs 最早是 Ricardo Cabello(一个西班牙小伙) 在 GitHub上发布的一个基于webgl的3D图形库。
当然,除了Threejs还有其他类似3D图形库比如:
threejs带来了什么？
3D绘图通常来说是比较复杂带工作，用到glsl到很多知识，用js直接调用操作，非常复杂且低效，
这个时候 threejs出现了，使用threejs封装好到功能，可以很方便快速到创造一些简单到场景。
下面我们就来试着写第一个hello world!
准备工作
新建空白 html 页面，引入 three.js，及页面元素准备。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello world</title>
<script type="text/javascript" src="js/three.js"></script>
</head>
<body>
<canvas id="mainCanvas"></canvas>
<script type="text/javascript">
// ...code
</script>
</body>
</html>
`
基本概念介绍
一个典型的Three.js程序至少要包括:
- 渲染器（Renderer）---- 渲染器将和Canvas元素进行绑定
- 场景（Scene）---- 我们创建的物体都添加到场景中，相当于一个大容器
- 照相机（Camera）---- 这里相当于一个透视投影的三维坐标系
- 在场景中创建的物体
创建一个形状的代码如下：
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000); // black
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera); // 记得把相机添加到场景
// 创建一个长方形
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
// 渲染器最终渲染
renderer.render(scene, camera);
现实中会有光源照射物体，产生光影效果，这里也可以添加 light。
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0xffcc00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// scene
var scene = new THREE.Scene();
// 添加环境光
var light = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(light);
// 添加点光源
var light2 = new THREE.PointLight(0xffffff, 0.7);
scene.add(light2);
// camera
var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
// camera.position.set(0, 0, 5);
var geometry = new THREE.CubeGeometry(200, 200, 200);
// var material = new THREE.MeshBasicMaterial();
var material = new THREE.MeshLambertMaterial({color: 0xffffee});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000);
scene.add(mesh);
//
requestAnimationFrame(render)
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
// render
renderer.render(scene, camera);
requestAnimationFrame(render)
}
总结
Threejs开发过程初步可归纳为
1、设置照相机 camera = new THREE.Camera(); 用于观察物体 2、设置场景 scene = new THREE.Scene() 用于承载物体 3、建立物体 geometry = new THREE.CubeGeometry(200, 200, 200); 4、创建网格 mesh = new THREE.Mesh(geometry, material) 5、渲染呈现 renderer.render(scene, camera)
当然还有灯光、动画、材质、控制场景内物体等其他内容，在此不赘述，后续逐步学习。
以上，如果使用过flash或者maya等软件等话，相信对以上场景、相机、渲染、灯光等会比较容易理解。 在这里可以联想为在3D软件里创建一个物体，当然软件所有操作及效果是需要我们用代码来实现。