初识 Three.js
起因
今天突然想学习网页 3D 技术
那么就来学一下构建网页 3D 的一个很热门的技术,Three.js
既然要学习了,那我们肯定要去他的官网学习一下的
安装和配置
是以下这个网址
Three.js - JavaScript 3D library
在找到它的文档页面,也可以直接点击以下链接
因为 three.js 的官网是部署在国外的,我们访问可能会有些慢
所以我们也可以通过克隆他们的 github 地址来本地部署
GitHub - mrdoob/three.js: JavaScript 3D Library.
在安装之前需要安装配置好 node,相信你们应该都是有配置好了的,这里就不过多赘述
先把它 down 下来之后就可以开始进行本地部署了
# 安装依赖
npm install
# 运行
npm run dev
成功安装运行后,会输出以下界面,在浏览器输入这些网址就可以访问到本地部署的服务了
基本概念
开始之前,我们需要了解一下基本的概念
场景
首先是场景,创建 3D 需要有一个场景,场景我的理解是相当于一个容器,来放各种东西的
摄像机
然后是摄像机,摄像机就想当于我们的眼睛,我们的眼睛能看到啥,都是摄像机提供的
物体
接下来是物体,3D 里面的物体有形状和材质
开始敲代码
首先我们需要通过 node 进行初始化
# 新建一个文件夹,在该文件夹下进入终端,输入以下命令
npm init
# 之后一路敲回车
# 安装依赖
npm install
接下来,我们需要安装依赖
# 这个是我们的要学习的框架,three.js
npm install three
npm install gsap
npm install dat.gui
# 这个包是热更新的包
npm install parcel-bundler
安装好之后,在根文件夹建立以下结构的文件,并且在 index.html 里面引入 style.css 和 main.js
之后我们在 packag.json 文件里面有一个 script 属性,我们给他改成以下格式
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel src/index.html"
}
把 style.css 里面的 body 样式更改一下,待会儿看看能不能成功运行
# 运行
npm run dev
如果你的网页上的 body 样式变成了你更改过后的样式那么就代表你成功了
成功之后,我们就可以开始敲代码了
首先,我们需要把 three.js 引入进来,打印一下看看引入成功与否
import * as THREE from "three";
console.log(THREE);
接下来,我们需要创建一个场景,没有场景就相当于没有容器,不能装东西了
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
之后我们要创建一个相机,没有相机就相当于没眼睛来看了,有关于摄像机视锥的知识,我们放到后一篇文章来讲
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
// 角度
75,
// 宽高比
window.innerWidth / window.innerHeight,
// 最近可视距离
0.1,
// 最远可视距离
1000
);
有了相机,相机自然是需要一个位置的,需要在场景里面添加相机和相机的位置
// 场景添加东西的代码是,xxx 是 three 属性 new 出来的一个构造对象
scene.add(xxx);
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 给相机一个位置
camera.position.set(0, 0, 10);
// 在场景里面添加相机
scene.add(camera);
之后我们来创建一个物体,并且在场景里面添加进去
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 给相机一个位置
camera.position.set(0, 0, 10);
// 在场景里面添加相机
scene.add(camera);
// 物体 -> 方形
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质 -> vue 的主题色
const cubeMaterial = new THREE.MeshBasicMaterial({
color: 0x4fc08d });
// 生成物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将物体添加到场景中
scene.add(cube);
之后有了相机,有了场景,有了物体
那肯定要把它能够解析出来放到页面上
这时候我们就需要一个渲染器了,把渲染器渲染出来的东西添加到页面上
在把场景和相机放入渲染器就可以生成我们的第一个 3D 图形啦,虽然可能是非常的简单
但是有些东西也是蛮重要的,我们下篇文章进行讲解
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 给相机一个位置
camera.position.set(0, 0, 10);
// 在场景里面添加相机
scene.add(camera);
// 物体 -> 方形
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质 -> vue 的主题色
const cubeMaterial = new THREE.MeshBasicMaterial({
color: 0x4fc08d });
// 生成物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将物体添加到场景中
scene.add(cube);
// 生成渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染器渲染的是画布 -> canvas
// 需要将渲染的 canvas 内容添加到 body 上
document.body.appendChild(renderer.domElement);
// 通过渲染器将场景和相机进行渲染
renderer.render(scene, camera);
以上就是我今天所分享的学习的东西,我们明天继续第二集~