网站产品页面浙江省建设监理管理协会网站
1.基本概念
1) 场景
如何理解场景 场景就是一个三维的世界, 在这个世界中可以放置各种各样的物体 可以理解成一个** 空间** , 或者** 容器**2) 相机
如何理解相机 🤔** 思考: ** 如何在二维平面表现三维效果 由于我们的显示器是二维平面, 只有两个维度, 如何在一个二维平面表现出三维效果呢? 在现实生活中, 得益于拍照技术, 从不同的角度拍射(观察)同一个物体, 然后通过一些光照阴影我们的大脑可以自行脑补出三维的画图 ** 这里的相机就是三维空间的观察者** 当相机从不同的角度观察同一个物体会得到不同的图像, 然后把这些图像使用一定的技术拼接组合, 我们的大脑会根据生活在三维世界的经验自行脑补出三维空间3) 物体
在三维空间, 可以放置一些物体, 这些物体就是** 被观察的对象** 不同的物体形状, 大小, 材质和纹理不相同 尽可能模拟现实生活中的实际物体, 比如
4) 光源
有了光照，物体就会有明暗效果的区别2.开发环境搭建
1) 开发建议
在开发之前, 我有几点建议 ** 1一定使用代码自动补全!!!** 由于three.js有众多的API, 名字长, 单词容易拼错, 基本上记不住 ** 2模块化开发** threejs的官方从150+版本后打算废弃直接引入的方式, 并在160版本移除
2) 初始化项目
创建一个目录three-basic, 执行npm init -y
3) 安装three.js
```javascript npm install three@0.152 ```⚠️**** 特别注意
由于threejs的更新非常快, 这里默认安装会自动安装最新版的three.js, 不同的版本下API和目录结构可能不同
本教程(2023-05-10)使用的版本是最新版(v0.152.2)
为了保证一致性, 建议大家在安装时指定版本
4) 使用vite
vite是开箱即用的下一代打包工具, 原生支持模块化开发 相比于webpackRollupParcel更快, 更好用 将vite安装成开发时依赖, 使用vite启动开发服务 注意：使用5.4.11版本的vitenpm i vite@5.4.11 -D
创建入口文件index.html, 在入口文件中引入
●初始化样式reset.css
●主入口文件main.js
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入初始化样式 --><link rel="stylesheet" href="./src/assets/styles/reset.css" /></head><body><!-- 使用模块化方式引入入口文件 --><script src="./src/main.js" type="module"></script></body>
</html>
* {margin: 0;padding: 0;
}body {background-color: skyblue;
}
// 导入THREE
import * as THREE from 'three'// 创建一个场景
const scene = new THREE.Scene()
console.log(scene)
编辑package.json脚本
"scripts": {"dev": "vite"
},
启动开发服务
npm run dev