ThreeJs新手入门不完全教学指南 快速入门篇(一)
这周利用闲暇时间学习了ThreeJs的一些基础入门知识。由于知识点繁多,借着这篇文章特来复习与巩固,也顺便分享给有需要的小伙伴~
由于内容较多,故分成几篇文章循序渐进,从浅到深方便大家理解,希望大家能多敲多写巩固记忆。
基础篇结束后将会迎来实战教学,还请各位多多点赞收藏关注~
好了,话不多说,我们开始
安装
首先建个工程项目,为了方便这里我用vue+vite的架子。然后安装我们的ThreeJs
pnpm add three --save
引入
import * as THREE from 'three'
创建第一个3D模型
创建我们第一个3D模型,首先需要添加ThreeJS必须得三个元素:scene
、camera
、render
const width = window.innerWidth;
const height = window.innerHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height, 0.25, 2000);
camera.position.set(100, 100, 100);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x444444, 1);
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
document.body.appendChild(renderer.domElement);
此时我们一个基本的threejs画布就有了,我们可以在上面添加一些东西。 比如一个方块
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
const mesh = new THREE.Mesh(geometry, material);
camera.lookAt(mesh.position);
scene.add(mesh)
我们创建了一个长宽高都是10的box几何体,添加一个基础材质,设置它的颜色属性。 创建一个网格模型,并将上面两项作为它的参数。 最后在场景中添加这个网格模型
添加环境光、坐标辅助
const ambient = new THREE.AmbientLight();
scene.add(ambient);
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);
以及相机控件,来帮助缩放、平移观察模型
new OrbitControls(camera, renderer.domElement);
此时页面效果
坐标轴中的红绿蓝分别对应xyz轴线,mesh对象的模型坐标就是坐标原点。
当我们改变浏览器窗口大小时,画布大小未曾变化,这里我们监听window的resize事件
window.onresize = function () {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
};
重新设置渲染器的尺寸以及相机的aspect属性,当相机的设置发生变化时需要调用updateProjectionMatrix进行更新。
接下来我们针对上面出现的几个概念进行详细的说明
几何体
在上面我们创建了一个矩形几何体,常见的还有以下
- 长方体---BoxGeometry
- 圆柱体---CylinderGeometry
- 球体---SphereGeometry
- 圆锥---ConeGeometry
- 矩形平面---PlaneGeometry
- 圆平面---CircleGeometry
我们批量添加进行测试
type GeometryType =
| 'BoxGeometry'
| 'CylinderGeometry'
| 'SphereGeometry'
| 'ConeGeometry'
| 'PlaneGeometry'
| 'CircleGeometry';
const geometryList = [
{
type: 'BoxGeometry',
args: [10, 10, 10]
},
{
type: 'CylinderGeometry',
args: [10, 10, 10]
},
{
type: 'SphereGeometry',
args: [10]
},
{
type: 'ConeGeometry',
args: [10, 10]
},
{
type: 'PlaneGeometry',
args: [10, 5]
},
{
type: 'CircleGeometry',
args: [10]
}
];
const material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
geometryList.forEach((item, index) => {
const geometry = new THREE[item.type as GeometryType](...item.args);
const mesh = new THREE.Mesh(geometry, material);
mesh.position.x = index * 20;
scene.add(mesh);
});
模型材质
常用的几个模型材质如下
- 基础网格材质---MeshBasicMaterial
- 漫反射网格材质---MeshLambertMaterial3
- 高光网格材质---MeshPhongMaterial
- 标准网格材质---MeshStandardMaterial
- 物理网格材质---MeshPhysicalMaterial
以上继承父类Material
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
transparent: true, // 开启透明
opacity: .3, // 透明度
map: Texture,// 纹理贴图
envMap: Texture // 环境贴图
...
});
更多配置大家可以自己动手尝试下不同的效果
相机
相机一般分为正投影相机与透视投影相机。区别就是透视投影相机遵循远小近大的原理,而正投影相机则不会。
透视投影相机
PerspectiveCamera( fov, aspect, near, far )
- fov:相机的可视角度,角度越大,可视范围也就越大
- aspect:水平方向与竖直方向宽高比,一般是画布的宽高比
- near:近裁截面距离
- far:远裁截面距离,与near构成可视范围高度
正投影相机
OrthographicCamera( left, right, top, bottom, near, far )
left, right, top, bottom对应渲染空间的上下左右范围 near、far与透视投影相机效果类似
结语
好了,第一篇就先说到这里,还请关注后续更新
转载自:https://juejin.cn/post/7276022536827322402