博客记录下使用Three.js展示3d文件的全过程:
学习博客链接:Three.js学习博客
1. 下载
官网:https://threejs.org/
让我们打开新鲜的解压文件:
看一下目录:
- build:里面含有 Three.js 构建出来的 JavaScript 文件,可以直接引入使用,并有压缩版;
- docs:Three.js 的官方文档
- editor:Three.js 的一个网页版的模型编辑器;
- examples:Three.js 的官方案例,如果全都学会,必将成为大神;
- src:这里面放置的全是编译 Three.js 的源文件;
- test:一些官方测试代码,我们一般用不到;
- utils:一些相关插件;
- 其他:开发环境搭建、开发所需要的文件,如果不对 Three.js 进行二次开发,用不到。
2. 第一个Three.js案例:
把three.js文件copy到项目中,引入到下面的html内:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>我的第一个Three.js案例</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body onload="init()">
<script src="../../assets/expand/plugins/Three/three.js"></script>
<script>
//声明一些全局变量
var renderer, camera, scene, geometry, material, mesh;
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer();
//实例化渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
//设置宽和高
document.body.appendChild(renderer.domElement);
//添加到dom
}
//初始化场景
function initScene() {
scene = new THREE.Scene();
//实例化场景
}
//初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
//实例化相机
camera.position.set(0, 0, 15);
}
//创建模型
function initMesh() {
geometry = new THREE.BoxGeometry( 2, 2, 2 );
//创建几何体
material = new THREE.MeshNormalMaterial();
//创建材质
mesh = new THREE.Mesh( geometry, material );
//创建网格
scene.add( mesh ); //将网格添加到场景
}
//运行动画
function animate() {
requestAnimationFrame(animate);
//循环调用函数
mesh.rotation.x += 0.01;
//每帧网格模型的沿x轴旋转0.01弧度
mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
renderer.render( scene, camera ); //渲染界面
}
//初始化函数,页面加载完成是调用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
animate();
}
</script>
</body>
</html>
运行预览: