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

上周向大家介绍了下在threeJs中几个最基本也是最重要的几个核心概念,场景、相机、渲染器等等,今天让我们来继续探索更多的功能。

还没看过上一篇的可以先去补习下这篇文章 ThreeJs新手入门不完全教学指南 快速入门篇(一)

好了,赶紧进入正题吧

点模型、线模型

在上一篇中我们介绍过了网格模型 Mesh 来创建几何体,这里我们来介绍另外两种。

点模型

js 复制代码
// 创建自定义的几何顶点
const vertices = new Float32Array([0, 0, 0, 50, 0, 0, 0, 100, 0, 0, 0, 10, 0, 0, 100, 50, 0, 10]);

// 创建一个三个一组的空间坐标
const attribute = new THREE.BufferAttribute(vertices, 3);

// 一个空的几何体
const geometry = new THREE.BufferGeometry();

// 添加定位属性
geometry.attributes.position = attribute;

const material = new THREE.PointsMaterial({
  color: 0xffff00,
  size: 5
});

const points = new THREE.Points(geometry, material);

scene.add(points);

与Mesh网格模型对应的材质不同,生成点模型材质的对象是PointsMaterial 通过点模型对象Points添加参数geometrymaterial

黄色的点就是生成的点模型,大家可以修改几何顶点查看不同的效果

线模型

js 复制代码
const material = new THREE.LineBasicMaterial({
  color: 0xffff00
});

const line = new THREE.Line(geometry, material);

scene.add(line);

添加线模型材质与对象

Line对象换成LineLoop可看到线段闭合效果

js 复制代码
const line = new THREE.LineLoop(geometry, material);

引入外部模型

往往threeJs所提供的几何模型只能实现些简单的模型,一些复杂的模型通常使用建模软件绘制完成后引入。

这里提供一个官方案例中的士兵模型,大家自行下载

将下载好的模型放入public目录下

由于这里提供的模型是glb格式,所以我们引入GLTFLoader

js 复制代码
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
js 复制代码
const loader = new GLTFLoader();
loader.load('/Soldier.glb', (gltf) => {
  scene.add(gltf.scene);

  renderer.render(scene, camera);
});

引入后看到坐标原点有个小黑点,我们拉近相机的距离

js 复制代码
camera.position.set(10, 10, 10);

效果如下

纹理贴图

当我们需要在模型上展示图片时,我们可以使用纹理贴图功能

这里创建一个矩形平面模型

js 复制代码
const geometry = new THREE.PlaneGeometry(200, 100);

const texLoader = new THREE.TextureLoader();

const texture = texLoader.load(
  'https://cc-blog-admin.oss-cn-beijing.aliyuncs.com/image/2023-09-11/5db9622b-243d-404f-b7a4-05147f486f24.png'
);

const material = new THREE.MeshLambertMaterial({ map: texture, side: THREE.DoubleSide });

const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh)

效果如下

如果将PlaneGeometry换成BoxGeometry

会看到六个面都贴上了图片

相关推荐
你挚爱的强哥14 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js