当前位置: 首页 > news >正文

Three.js之创建3D场景

参考资料

  • 【G】Three.js官方文档:https://threejs.org/docs/
    Three.js是一个流行的WebGL库,官方文档提供了详细的API参考和示例,适合学习和参考。
  • 【G】Three.js GitHub链接:https://github.com/mrdoob/three.js
    这是一个流行的基于WebGL的3D图形库,提供了丰富的功能和工具,用于创建交互式的3D场景和应用。它是一个开源项目,可以在GitHub上找到它的代码库。
  • Three.js中文网:http://www.webgl3d.cn/pages/2de1b9/
  • Three.js教程系列:https://www.tutorialspoint.com/threejs/ (英文)
    这个教程系列提供了一系列关于Three.js的教程,从基础到高级的内容都有涉及。
  • 学习视频:
  • Three.js教程 2023年新版本
  • 3D可视化地图大数据可视化地图保姆级教学
  • Three.js文章
  • 浅探Web 3D技术:强大而有趣的Three.js

Three.js是什么?

Three.js是一款基于原生WebGL封装通用Web 3D引擎,在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

只要你有Web3D可视化的需求,基本上都可以首选学习Three.js。

如何学习Three.js?

有没有原生WebGL基础,你都可以直接学习Three.js,刚刚入门three.js时候,可以先不用学习WebGL,当你需要进阶深入学习Three.js的时候,最好先去学学原生WebGL,了解了解图形学相关理论知识,即便只是稍微入门WebGL,那对于three.js深入学习帮助都是很大的。

准备:

  • 代码编辑器:VSCode
  • 静态服务器:安装插件Live Server,然后右击打开“Open with Live Server”

创建3D场景

入门Three.js的第一步,就是认识场景Scene、相机Camera、渲染器Renderer三个基本概念。

三维场景Scene

你可以把三维场景Scene (opens new window)对象理解为虚拟的3D场景,用来表示模拟生活中的真实三维场景,或者说三维世界。

// 创建3D场景对象Scene
const scene = new THREE.Scene();

物体形状:几何体Geometry

Three.js提供了各种各样的几何体API,用来表示三维物体的几何形状。
文档搜索关键词geometry你可以看到threejs提供各种几何体相关API,具体使用方法,也可以参考文档。

//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100); 

物体外观:材质Material

如果你想定义物体的外观效果,比如颜色,就需要通过材质Material相关的API实现。

threejs不同材质渲染效果不同,下面就以threejs最简单的网格基础材质MeshBasicMaterial (opens new window)为例给大家实现一个红色材质效果。

//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({color: 0xff0000,//0xff0000设置材质颜色为红色
}); 

物体:网格模型Mesh

实际生活中有各种各样的物体,在threejs中可以通过网格模型Mesh (opens new window)表示一个虚拟的物体,比如一个箱子、一个鼠标。

// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

模型位置.position

实际生活中,一个物体往往是有位置的,对于threejs而言也是一样的,你可以通过位置属性.position定义网格模型Mesh在三维场景Scene中的位置。

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标,默认是坐标原点
mesh.position.set(0,10,0);

.add()方法

在threejs中你创建了一个表示物体的虚拟对象Mesh,需要通过.add()方法,把网格模型mesh添加到三维场景scene中。

scene.add(mesh);
http://www.lryc.cn/news/105812.html

相关文章:

  • 一个3年Android的找工作记录
  • CAS原理解析
  • SQL项目实战:银行客户分析
  • 【Redis深度专题】「核心技术提升」探究Redis服务启动的过程机制的技术原理和流程分析的指南(集群指令分析—实战篇)
  • ubuntu
  • 【芯片设计- RTL 数字逻辑设计入门 3- Verdi 常用使用命令】
  • python-pytorch基础之cifar10数据集使用图片分类
  • 华纳云:linux下磁盘管理与挂载硬盘方法是什么
  • ChatGPT + Stable Diffusion + 百度AI + MoviePy 实现文字生成视频,小说转视频,自媒体神器!(一)
  • linux strcpy/strncpy/sprintf内存溢出问题
  • Jmeter如何添加插件
  • flask---CBV使用和源码分析
  • Qt 实现压缩文件、文件夹和解压缩操作zip
  • 简单工厂模式VS策略模式
  • 【MySQL】触发器 (十二)
  • 听说 Spring Bean 的创建还有一条捷径?
  • 大数据课程E6——Flume的Processor
  • 实现邮箱管理之gmail邮箱、office365(Azure)邮箱之披荆斩棘问题一览
  • (AcWing)多重背包问题 I,II
  • 如何把几个视频合并在一起?视频合并方法分享
  • 【MyBatis】初学MyBatis
  • 深度学习训练营之DCGAN网络学习
  • 自定义MVC增删改查
  • RabbitMQ 教程 | 第2章 RabbitMQ 入门
  • 双网卡如何配置DNS?我是一个仅主机模式配置静态(static)IP、一个NET或桥接(dhcp获取)
  • Android10: 动态隐藏导航栏和状态栏总结
  • roop 视频换脸
  • Java类集框架(一)
  • Jsp+Ssh+Mysql实现的简单的企业物资信息管理系统项目源码附带视频指导运行教程
  • 【Spring】深究SpringBoot自动装配原理