likes
comments
collection
share

ThreeJs新手入门不完全教学指南 快速入门篇(一)

作者站长头像
站长
· 阅读数 19

这周利用闲暇时间学习了ThreeJs的一些基础入门知识。由于知识点繁多,借着这篇文章特来复习与巩固,也顺便分享给有需要的小伙伴~

由于内容较多,故分成几篇文章循序渐进,从浅到深方便大家理解,希望大家能多敲多写巩固记忆。

基础篇结束后将会迎来实战教学,还请各位多多点赞收藏关注~

好了,话不多说,我们开始

安装

首先建个工程项目,为了方便这里我用vue+vite的架子。然后安装我们的ThreeJs

pnpm add three --save

引入

import * as THREE from 'three'

创建第一个3D模型

创建我们第一个3D模型,首先需要添加ThreeJS必须得三个元素:scenecamerarender

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);

此时页面效果 ThreeJs新手入门不完全教学指南 快速入门篇(一)

坐标轴中的红绿蓝分别对应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);
  });

ThreeJs新手入门不完全教学指南 快速入门篇(一)

模型材质

常用的几个模型材质如下

  • 基础网格材质---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
评论
请登录