#. 前言
Three.js 是基于原生 WebGL
封装运行的三维引擎,在所有 WebGL
引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。
可用于物联网3D可视化、产品720在线预览、数据可视化、科教领域、家装室内设计相关及WebVR相关等。
本质上主要借助于 canvas
来实现,一般前端比较复杂的绘图基本上都是 canvas
(画布)。
#. 引入
- npm 安装
npm install three --save-dev
import * as THREEfrom 'three'
- script 标签引入
<script src="../assets/js/thress.js"> </script>
#. 使用
一般使用 three.js 分为三步:创建场景 ==> 创建相机 ==> 创建渲染器。
1. 创建场景
// 创建一个场景
let scene = new THREE.Scene();
2. 创建相机
// 创建一个投射相机 (接收四个参数)
// 第一个参数:视角
// 第二个参数:宽高比
// 第三个参数:近面距离 (z轴)
// 第四个参数:远面距离 (z轴)
let wh = window.innerWidth / window.innderHeight;
let camera = new THREE.PerspectiveCamera(65, wh, 100, 1000);
// 设置相机的位置
camera.position.z = 500 或 camera.set(0,0,500);
3. 创造渲染器
// 创建渲染器
let renderer = new THREE.WebGLRenderer({
antialias:true // 去除锯齿
});
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器的背景色 与 透明度
renderer.setClearColor(0xff00ff, 1);
写到这这里, 基本步骤就完成了。但只是一个空场景并没有什么东西,我们来创建一个几何体,举个栗子:
// 创建一个 长、宽、高都是 100 的正方体
let geometry = new THREE.BoxGeomotry(100,100,100);
// 指定几何体的材料
// 这种为 简单着色(平面或线框)方式来绘制几何体的材质
// 不受光照的影响 即不能使用 DirectionalLight(平行光) 及 AmbientLight(环境光)
let material = new THREE.MeshBasicMaterial({ // 方式一
color: 0x00ff00
});
// 也可设置高光材质,这种材质必须设置 AmbientLight(环境光)
let material = new THREE.MeshPhongMaterial({ // 方式二
color: 0x00ff00
});
// AmbientLight(环境光)
let light = new Three.AmbientLight( 0x00e5fd ); // soft white light
scene.add(light);
// 把几何体 和 材料组合起来, 形成网格
let cube = new THREE.Mesh(geometry, material);
// 旋转网格
cube.rotation.x = 0.3;
cube.rotation.y = 0.5;
// 把网格放到场景中
scene.add(cube);
4. 把 canvas 渲染在页面上
// 把创建好的canvas放在页面中
document.body.appendChild(renderer.domElement);
// 渲染创建好的场景 和 相机
renderer.render(scene, camera);
5. 自动旋转
function animate(){
cube.rotation.x += 0.1;
cube.rotation.y = 0.1;
renderer.render(scene, camera);
// 这一帧执行完,自动执行下一帧
requestAnimationFrame(animate);
}
// 调用动画
animate();
6. 鼠标控制
安装
npm install three-orbitcontrols --s
引入
import 'three-orbitcontrols'
使用
let controls = new Three.OrbitControls(camera, renderer.domElement);
controls.update();
到这里就完成啦,赶快试试吧~~
别忘记点赞哦~~
网友评论