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

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

相关推荐
Mintopia3 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李4 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风5 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录6 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia6 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽8 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥9 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023413 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder18 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder18 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端