目录
- three.js 之 入门篇
- 1:使用parcel搭建 three.js 开发环境
- 2:运行一个简单的场景和物体
- 2.1 main.js
- 2.2效果
- 3:轨道控制器和控制物体 mesh
- 3.1 main.js
- 3.2效果
- 4:添加坐标辅助器 AxesHelper
- 4.1
- 4.2效果
- 5:设置几何体移动
- 5.1
- 5.2 效果
- 6:设置几何体缩放和旋转 mesh下的 rotation
- 8:设置基本动画
- 9:通过Clock 跟踪时间处理动画
three.js 之 入门篇
1:使用parcel搭建 three.js 开发环境
parcel
- 项目之中安装:
npm install parcel-bundler --save-dev
- 安装之中 配置脚本指令 ( 项目根目录下 src / index,html )
"scripts": { "dev": "parcel <your entry file>", // eg: "dev": "parcel src/index.html", "build": "parcel build <your entry file>", "test": "echo \"Error: no test specified\" && exit 1" },
- 安装three :
npm install three --save
- 文件目录
- src / index.html
<!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"> <link rel="stylesheet" href="./assets/css/style.css"> <title>Document</title> </head> <body> <script src="./main/main.js" type="module"></script> </body> </html>
- src / main / main.js
import * as THREE from "three" console.log('main.js',THREE);
- 运行项目 :
npm run dev
2:运行一个简单的场景和物体
2.1 main.js
import * as THREE from "three"
// console.log('main.js',THREE);
// 1:创建场景
const scene = new THREE.Scene()
// 2:创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10)
// 把相机添加到场景之中
scene.add( camera );
// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 使用渲染器,通过相机将场景渲染进来
renderer.render(scene,camera)
2.2效果
3:轨道控制器和控制物体 mesh
3.1 main.js
import * as THREE from "three"
// console.log('main.js',THREE);
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 1:创建场景
const scene = new THREE.Scene()
// 2:创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10)
// 把相机添加到场景之中
scene.add( camera );
// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene,camera)
// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 渲染函数 - 每一帧渲染一次
function animate() {
// 渲染下一帧 的时候 会调用 animate 函数
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
animate()
3.2效果
4:添加坐标辅助器 AxesHelper
4.1
import * as THREE from "three"
// console.log('main.js',THREE);
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 1:创建场景
const scene = new THREE.Scene()
// 2:创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10)
// 把相机添加到场景之中
scene.add( camera );
// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene,camera)
// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
// 渲染函数 - 每一帧渲染一次
function animate() {
// 渲染下一帧 的时候 会调用 animate 函数
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
animate()
4.2效果
5:设置几何体移动
5.1
import * as THREE from "three"
// console.log('main.js',THREE);
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 1:创建场景
const scene = new THREE.Scene()
// 2:创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10)
// 把相机添加到场景之中
scene.add( camera );
// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
mesh.position.set(5,0,0)
// mesh.position.x = 3
// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene,camera)
// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1:添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
// 渲染函数 - 每一帧渲染一次
function animate() {
// 06-2设置几何物体 集合体再x轴之中移动,到5的时候,回到原始位置
mesh.position.x += 0.01
if ( mesh.position.x > 5 ) {
mesh.position.x = 0
}
// 渲染下一帧 的时候 会调用 animate 函数
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
animate()
5.2 效果
6:设置几何体缩放和旋转 mesh下的 rotation
import * as THREE from "three"
// console.log('main.js',THREE);
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 1:创建场景
const scene = new THREE.Scene()
// 2:创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10)
// 把相机添加到场景之中
scene.add( camera );
// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
// mesh.position.set(5,0,0)
// mesh.position.x = 3
// 07-1 几何体的缩放
// mesh.scale.set(3,2,1)
// mesh.scale.x = 3
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是,先旋转那个轴
// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene,camera)
// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1:添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
// 渲染函数 - 每一帧渲染一次
function animate() {
// 06-2设置几何物体 集合体再x轴之中移动,到5的时候,回到原始位置
mesh.position.x += 0.01
// 07-3 几何体的旋转2
mesh.rotation.x += 0.01
if ( mesh.position.x > 5 ) {
mesh.position.x = 0
}
// 渲染下一帧 的时候 会调用 animate 函数
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
animate()
8:设置基本动画
import * as THREE from "three"
// console.log('main.js',THREE);
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 1:创建场景
const scene = new THREE.Scene()
// 2:创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10)
// 把相机添加到场景之中
scene.add( camera );
// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
// mesh.position.set(5,0,0)
// mesh.position.x = 3
// 07-1 几何体的缩放
// mesh.scale.set(3,2,1)
// mesh.scale.x = 3
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是,先旋转那个轴
// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene,camera)
// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1:添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
// 渲染函数 - 每一帧渲染一次
function animate(time) {
// 08-1:动画的时候
let t = time / 1000 // time 当前毫秒数
mesh.position.x = t * 1;
if ( mesh.position.x > 5 ) {
mesh.position.x = 0
}
// 渲染下一帧 的时候 会调用 animate 函数
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
animate()
9:通过Clock 跟踪时间处理动画
import * as THREE from "three"
// console.log('main.js',THREE);
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 1:创建场景
const scene = new THREE.Scene()
// 2:创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10)
// 把相机添加到场景之中
scene.add( camera );
// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 修改几何体 在xyz轴的位置
// mesh.position.set(5,0,0)
// mesh.position.x = 3
// 07-1 几何体的缩放
// mesh.scale.set(3,2,1)
// mesh.scale.x = 3
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是,先旋转那个轴
// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// // 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene,camera)
// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1:添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
// 9-1 设置时钟
let clock = new THREE.Clock()
// 渲染函数 - 每一帧渲染一次
function animate() {
// 9-2 设置时钟
let time = clock.getElapsedTime() // 获取时钟运行总时长
// let deltaTime = clock.getDelta() // 两次获取时钟的间隔时间
let t = time % 5 // time 当前毫秒数
mesh.position.x = t * 1;
// 渲染下一帧 的时候 会调用 animate 函数
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
animate()