three.js零基础入门超全超细的教程整理（一）

news2024/10/5 14:09:21

事情是这样的： 有一天 我干完活 看技术文章 发现了three.js 诶！这玩应挺有意思 盘盘
于是第一天找教程 上官网 初上手
第二天 找案例 渲模型 试VR
第三天 捋文档 然后来活了 没时间捋了

下面是集百家精华教程的整理总结 涉及到教程方面有加源作者和地址

超详细的教程：http://www.webgl3d.cn/Three.js/ （作者：郭隆邦）
官网地址： https://threejs.org/
下载又慢又卡可以从github上直接下载到本地启动
three.js官方资源地址：https://github.com/mrdoob/three.js/

(我这实在太卡了 后来找的别人分享的百度网盘 下载的three.js官方案例 也挺大的 里头有很多案例 模型 文档等)
在这里插入图片描述
目录结构

  • docs：里头是官方API文档
  • editor：官方带的可视化编辑器（我还没试过这个）
  • examples：官网案例
  • src：three源码
  • utils：辅助工具

cnpm install npm run dev启动项目后 index.html里右击 open with live server

在这里插入图片描述
three.js运行需要启动本地的服务器。所以我们在VSCode上整个Live Server插件
Live Server插件可以自动监听 快速启动本地服务 不用手动刷新就能更新内容
在这里插入图片描述
官网的案例
在这里插入图片描述
docs文档：
在这里插入图片描述
editor目录：
在这里插入图片描述
editor 基于web的编辑器 可以在浏览器里创建 编辑 导出three.js场景和模型

**什么是three.js ：**前端3D框架 （ 绘制3D的js轻量级框架 采用HTML5 Canvas提供硬件3D加速渲染）
**应用场景：**VR模型、地图、家装，机房、厂房等

第一个demo

参照教程：https://juejin.cn/post/7263846857407103032?searchId=2024022810311654D9F40D801D3B5376B1
（作者：chonglingliu）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js入门</title>
  </head>
  <body>    
    <!-- <script type="importmap">
      {
        "imports": {
          "three": "./build/three.module.js",
          "OrbitControls": "./OrbitControls.js",
          "GLTFLoader": "./GLTFLoader.js",
        }
      }
    </script> -->
    <script src="./script.js" type="module"></script>
    <div id="container"></div>
</body>
</html>

script.js （顺序可能不合理 但效果能出来）
这里不知道啥原因 引入three.js官方案例里的…/…/examples/jsm/controls/OrbitControls.js 控制台 总是报错

Uncaught TypeError: Failed to resolve module specifier “three/addons/controls/OrbitControls.js”. Relative references must start with either “/”, “./”, or “…/”.

搜也搜不出来 后来没招了 引的cdn地址 好歹是可以用了



	import * as THREE from '../../build/three.module.js';
	window.THREE = THREE;
	
	
	
	// 1. 引入图片
	// import floor from "./images/floor_wood.jpg";
	
	// import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js'
	// import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
	import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
	
	
	
	
	// 1. 创建渲染器,指定渲染的分辨率和尺寸,然后添加到body中
	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.pixelRatio = window.devicePixelRatio;
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.append(renderer.domElement);
	
	// 2. 创建场景
	const scene = new THREE.Scene();
	
	// 3. 创建相机
	const camera = new THREE.PerspectiveCamera(
	  75,
	  window.innerWidth / window.innerHeight,
	  0.1,
	  1000
	);
	
	camera.position.set(5, 5, 10);
	
	camera.lookAt(0, 0, 0);
	
	// 4. 创建物体
	const axis = new THREE.AxesHelper(5);
	scene.add(axis);
	
	// 添加立方体
	// const geometry = new THREE.BoxGeometry(4, 4, 4);
	// const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
	
	// 1.
	// const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
	
	
	// 2. 初始化纹理加载器
	const textloader = new THREE.TextureLoader();
	
	
	const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
	scene.add(ambientLight);
	
	// 3.
	const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
	directionalLight.position.set(10, 10, 10)
	scene.add(directionalLight);
	
	const geometry = new THREE.BoxGeometry(4, 4, 4);
	const material = [
	  new THREE.MeshBasicMaterial({
	    map: textloader.load('./images/657.jpg')
	  }),
	  new THREE.MeshBasicMaterial({
	    map: textloader.load('./images/657.jpg')
	  }),
	  new THREE.MeshBasicMaterial({
	    map: textloader.load('./images/657.jpg')
	  }),
	  new THREE.MeshBasicMaterial({
	    map: textloader.load('./images/657.jpg')
	  }),
	  new THREE.MeshBasicMaterial({
	    map: textloader.load('./images/657.jpg')
	  }),
	  new THREE.MeshBasicMaterial({
	    map: textloader.load('./images/657.jpg')
	  }),
	];
	const cube = new THREE.Mesh(geometry, material);
	
	
	// const cube = new THREE.Mesh(geometry, material);
	scene.add(cube);
	
	// 1. 渲染器能够渲染阴影效果
	renderer.shadowMap.enabled = true;
	
	// 2. 该方向会投射阴影效果
	directionalLight.castShadow = true;
	
	cube.castShadow = true;
	
	// 4. 
	const planeGeometry = new THREE.PlaneGeometry(20, 20);
	// const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
	
	// 3. 给地板加载纹理
	const planeMaterial = new THREE.MeshStandardMaterial({
	  map: textloader.load('./images/floor_wood.jpg')
	})
	
	const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
	planeMesh.rotation.x = -0.5 * Math.PI;
	planeMesh.position.set(0, -3, 0);
	planeMesh.receiveShadow = true;
	scene.add(planeMesh);
	
	// 5. 方向光的辅助线
	const directionalLightHelper = new THREE.DirectionalLightHelper(
	  directionalLight
	);
	scene.add(directionalLightHelper); // 辅助线
	
	
	cube.rotation.y = Math.PI / 4;
	
	// function animate() {
	//     requestAnimationFrame(animate);
	//     cube.rotation.y += 0.01;
	//     renderer.render(scene, camera);
	//   }
	    
	const controls = new OrbitControls(camera, renderer.domElement);
	controls.update();
	
	
	const clock = new THREE.Clock();
	
	function animate() {
	  requestAnimationFrame(animate);
	
	  const elapsedTime = clock.getElapsedTime(); // 返回已经过去的时间, 以秒为单位
	//   cube.rotation.y = elapsedTime * Math.PI; // 两秒自转一圈
	  cube.rotation.y = elapsedTime * 1; // 两秒自转一圈
	
	  renderer.render(scene, camera);
	}
	
	animate() 
	
	
	// // 5. 渲染
	// renderer.render(scene, camera);

在这里插入图片描述
这抽巴巴的丑字 哈哈哈 因为我不写出来 只用眼睛看不过脑子记不住

1.创建 3D场景对象 Scene
2.创建 网格模型对象
3.光源设置
4.透视 投影 相机对象设置
5.创建渲染器对象

场景 Scene
几何体 Geometries
材质 Materials
物体 Objects
相机 Cameras
渲染器 Renderers

Threejs中的几个重要概念
在使用threejs之前，要先了解threejs中的几个重要概念，分别是场景(Scenes)、几何体(Geometries)、材质(Materials)、物体(Objects)、相机(Cameras)和渲染器(Renderers)
1.Scenes：场景的概念原本是戏剧、电影中的概念，指的是某一个特定的场面；threejs中的场景其实就是一个特定的场面，想象一下，假如你是导演，要拍一个火车进站的镜头，这就是一个场景

2.Geometries：几何体就是立体图形，如正方体、球、圆等图形；在场景中就相当于一个道具的外形结构；threejs中提供了很多几何体，如立方体(BoxGeometry)、圆(CircleGeometry)、圆锥(ConeGeometry)等，具体可查看threejs的官方文档

3.Materials：材质顾名思义就是物体的材料质感，比如颜色、透明度等，在场景中就相当于道具的颜色和材料，threejs中也提供了很多材质类接口，比如基础网格材质(MeshBasicMaterial)等，老规矩，具体的内容还是查看threejs的官方文档

4.Objects：物体也称对象，物体就是客观存在的一种物质，一个物体包括两方面的特性，即它的形状和材质。threejs中物体由Geometries和Materials两部分组成，这就相当于电影中的道具枪一样，它由外形结构(几何体)和材料颜色(材质)组成。

5.Cameras：相机就相当于电影中用于拍摄的摄像机，相机拍摄的角度、远近场景的切换等由其控制。

6.Renderers：渲染器相当于电影的后期合成，我场景有了，物体也准备好了,相机拍摄完成了，就需要用渲染器把拍摄的东西通过合成展现出来。上面这段 没找着出处

我这里只是一个总结整理 感谢出教程的各位大佬
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1578167.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI智能分析盒子在工地的应用，提高工地管理效率和安全性

AI智能分析盒子在工地的应用，提高工地管理效率和安全性

工地ai智能分析盒子是一种基于人工智能视觉分析技术的人工智能盒子&#xff0c;旨在提升工地作业区域的管理效率和保障作业人员的安全。通过最前沿的AI视觉算法、大数据&#xff0c;能够实时监控工地现场视频流画面&#xff0c;对施工工地人员的工作着装及日常作业行为进行规范…
阅读更多...
【多线程】进程（进程的概念+进程的管理+PCB（进程控制块）+进程的调度）

【多线程】进程（进程的概念+进程的管理+PCB（进程控制块）+进程的调度）

文章目录 进程一、计算机的组成&#xff1a;1.指令&#xff08;Instruction&#xff09; 二、浅谈操作系统1.日常的操作系统1.操作系统内核内核&#xff1a;进程的隔离性&#xff1a; 三、进程&#xff08;process&#xff09;1.进程的概念2.进程的管理1.管理的两个角度&#x…
阅读更多...
短视频有效粉丝不够怎么涨？有效粉丝不满足500怎么解决？不够500有效粉丝怎么挂橱窗？

短视频有效粉丝不够怎么涨？有效粉丝不满足500怎么解决？不够500有效粉丝怎么挂橱窗？

在这个流量主导的短视频时代&#xff0c;想要在短视频平台上增加粉丝数量并非易事。然而随着短视频平台规则更新4月16日开始&#xff0c;不能满足五百有效粉丝&#xff0c;就不能挂橱窗了&#xff0c;对一些有效粉丝不够的用户来说&#xff0c;这个的确是有点麻烦&#xff0c;而…
阅读更多...
Mysql底层原理二：Buffer Pool

Mysql底层原理二：Buffer Pool

1.数据区 就是描述信息缓存页这块&#xff0c;用来存放从磁盘加载的数据页&#xff08;看上图 索引页和数据页是分开的&#xff09; 2. free链表 用来标识数据区哪些数据页是可用的 3. flush链表 update的时候&#xff0c;如果数据在数据区可以找到&#xff0c;那就直接内…
阅读更多...
基于Vue3 中后台管理系统框架

基于Vue3 中后台管理系统框架

基于Vue3 中后台管理系统框架 文章目录 基于Vue3 中后台管理系统框架一、特点二、源码下载地址 一款开箱即用的 Vue 中后台管理系统框架&#xff0c;支持多款 UI 组件库&#xff0c;兼容PC、移动端。vue-admin, vue-element-admin, vue后台, 后台系统, 后台框架, 管理后台, 管理…
阅读更多...
GPU部署ChatGLM3

GPU部署ChatGLM3

首先&#xff0c;检查一下自己的电脑有没有CUDA环境&#xff0c;没有的话&#xff0c;去安装一个。我的电脑是4060显卡&#xff0c;买回来就自带这些环境了。没有显卡的话&#xff0c;也不要紧&#xff0c;这个懒人安装包支持CPU运行&#xff0c;会自动识别没有GPU&#xff0c;…
阅读更多...
力扣刷题Days33-274. H 指数（js）

力扣刷题Days33-274. H 指数（js）

目录 1&#xff0c;题目 2&#xff0c;代码 2.1排序 2.2计数排序 3&#xff0c;学习与总结 3.1排序实现的学习总结 3.2计数排序的学习总结 1&#xff0c;题目 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返…
阅读更多...
vs2017离线安装（配合QT5.9.2使用）

vs2017离线安装（配合QT5.9.2使用）

以vs2017_Professional版本为例&#xff1a; 一、下载安装包vs2017_Professional.exe&#xff08;在线安装包即可&#xff09; 二、创建在目录&#xff1a;C:\vs2017_Professional_Package&#xff0c;把vs2017_Professional.exe放在该目录下。 ID&#xff1a; Microsoft.Vis…
阅读更多...
pytorch演示pipeline并行

pytorch演示pipeline并行

pytorch演示pipeline并行 1.单卡内存不够时,可以将网络切分成几段(stage),每个GPU负责一个stage。比如GPU0计算完之后将数据发送给GPU1算后续的stage 2.以上的方式,会导致GPU的利用率不高,可以将输入的batch切分成多份更小的batch,陆续送给GPU0,这样GPU0处理完micro batch0之后…
阅读更多...
计算机网络 实验指导 实验9

计算机网络 实验指导 实验9

实验9 三层交换机综合实验 1.实验拓扑图 名称相连的接口IP地址网关PC1F0/3172.1.1.2/28172.1.1.1/28PC2F0/4172.1.1.18/28172.1.1.17/28PC3F0/5172.1.1.34/28172.1.1.33/28PC4F0/3172.1.1.3/28172.1.1.1/28PC5F0/4172.1.1.19/28172.1.1.17/28PC6F0/5172.1.1.35/28172.1.1.33/2…
阅读更多...
基于单片机分舱式电开水炉位控制系统

基于单片机分舱式电开水炉位控制系统

**单片机设计介绍&#xff0c;基于单片机分舱式电开水炉位控制系统 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机分舱式电开水炉位控制系统概要主要涉及通过单片机对电开水炉的各个舱位进行精确控制&#xff0c;实现水位、温度…
阅读更多...
mos管开关出现尖峰的原理？ mos管开关的时候cs会出现尖峰，请问这是什么原因？

mos管开关出现尖峰的原理？ mos管开关的时候cs会出现尖峰，请问这是什么原因？

MOS管在开关过程中出现尖峰现象&#xff0c;通常是由于电路中的寄生参数和快速电压变化引起的。以下是一些导致尖峰出现的主要原因和原理&#xff1a; 寄生电容 在MOS管的源极&#xff08;S&#xff09;和漏极&#xff08;D&#xff09;之间存在寄生电容&#xff0c;这个电容在…
阅读更多...
考研数据结构——栈和队列（最全！）

考研数据结构——栈和队列（最全！）

一、栈 1.1栈的定义和基本概念 要讨论一种数据结构&#xff0c;就要从三方面讨论&#xff1a;逻辑结构、数据的运算、存储结构&#xff08;物理结构&#xff09;。 1.1.1 定义 线性表&#xff1a;线性表是具有相同数据类型的n个数据元素的有限序列&#xff0c;其中n为表长&am…
阅读更多...
JavaScript - 你是如何区分一个变量是对象还是数组的

JavaScript - 你是如何区分一个变量是对象还是数组的

难度级别：中高级及以上 提问概率：65% 我们日常如果想要获得一个变量的类型，大多会使用typeof的方法，但typeof却不是很准确，遇到null、数组或是对象这种数据类型的时候，他就失灵了，返回值是object，那么都有哪些方式可以区分一个变量的类…
阅读更多...
【CHI】（十二）Memory Tagging

【CHI】（十二）Memory Tagging

目录 1. Introduction 2. Message extensions 3. Tag coherency 4. Read transaction rules 4.1 TagOp values 4.2 Permitted initial MTE tag states 5. Write transactions 5.1 Permitted TagOp values 5.2 TagOp, TU, and tags relationship 6. Dataless transact…
阅读更多...
机器学习笔记 - 深度学习遇到超大图像怎么办？使用 xT 对极大图像进行建模论文简读

机器学习笔记 - 深度学习遇到超大图像怎么办？使用 xT 对极大图像进行建模论文简读

作为计算机视觉研究人员，在处理大图像时，避免不了受到硬件的限制，毕竟大图像已经不再罕见，手机的相机和绕地球运行的卫星上的相机可以拍摄如此超大的照片，遇到超大图像的时候，我们当前最好的模型和硬件都会达到极限。 所以通常我们在处理大图像时会做出两个次优选择之一：…
阅读更多...
并发编程三大特性之可见性

并发编程三大特性之可见性

一、什么是可见性&#xff1f; 可见性问题是基于CPU位置出现的&#xff0c;cpu处里速度非常快&#xff0c;相对CPU来说去主内存 获取数据这个事情太慢了&#xff0c;CPU就提供了 L1&#xff0c;L2&#xff0c;L3的三季缓存&#xff0c;每次去主内存拿完 数据后&#xff0c;数据…
阅读更多...
SIT1051AQ5V 供电，IO 口兼容 3.3V，±58V 总线耐压，CAN FD 静音模式总线收发器

SIT1051AQ5V 供电，IO 口兼容 3.3V，±58V 总线耐压，CAN FD 静音模式总线收发器

SIT1051AQ 是一款应用于 CAN 协议控制器和物理总线之间的接口芯片&#xff0c;可应用于车载、工业 控制等领域&#xff0c;支持 5Mbps 灵活数据速率 CAN FD &#xff0c;具有在总线与 CAN 协议控制器之间进行差分信 号传输的能力。 SIT1051AQ 为 SIT1051Q 芯片的…
阅读更多...
python应用-计算两个日期的时间差

python应用-计算两个日期的时间差

学习目录 1. 安装deteutil包 2. 导入relativedelta类 3. 计算两个日期的差值 4. 计算1个日期和时间差相加后得到新的日期 之前在工作中遇到一个使用场景&#xff1a;需要计算两个日期之前的差值&#xff0c;比如相差了几年几月几日&#xff0c;查找资料发现deteutil包的rel…
阅读更多...
基于Leaflet.js的Marker闪烁特效的实现-模拟预警

基于Leaflet.js的Marker闪烁特效的实现-模拟预警

目录 前言 一、闪烁组件 1、关于leaflet-icon-pulse 2、 使用leaflet-icon-pulse 3、方法及参数简介 二、闪烁实例开发 1、创建网页 2、Marker闪烁设置 3、实际效果 三、总结 前言 在一些地质灾害或者应急情况当中&#xff0c;或者热门预测当中。我们需要基于时空位置来…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023