three入门学习
Three
官网：three.js
1.安装
1.1 下载
npm install three --save-dev
1.2 使用
import * as THREE from "three"
2.基本构成
2.1 场景
// 1.创建场景
const scene = new THREE.Scene();2.2 相机
// 2、创建相机 透视相机
// fov:角度 aspect:宽高比 near:近端 far:远端
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1 , 1000);
//设置相机位置
camera.position.set(0, 0, 10);
//添加到场景
scene.add(camera);
2.3 物体
// 添加物体 立方缓冲几何体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(10, 10, 10)
// 创建材质
const cubeMaterial = new THREE.MeshBasicMaterial({ color:0xffff00 });
//根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
//修改物体位置
//cube.position.set(5, 0, 0);
// cube.position.x = 3 ;
//将几何体添加到场景里边
scene.add(cube)2.4 渲染器
// 初始化渲染器
const renderer = new THREE.WebRenderer();
//设置渲染器大小
renderer.setSize( window.innerWidth, window.innerHeight);
2.5 监听浏览器变化
//监听屏幕大小的改变，修改渲染器的宽高和相机比例：
window.addEventListener("resize", ()=>{
renderer.setSize(window.innerWidth , window.innerHeight)
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})2.6 使用轨道控制器（实现3d效果）
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
//创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement );
2.7 坐标轴辅助器
//坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
//坐标轴添加到场景里
scene.add(axesHelper);2.8 渲染场景
function render(){
renderer.render(scene , camera)
//渲染下一帧时候调用render函数
requestAnimationFrame(render)
}
render()2.9 整体代码
// 引入three
import * as THREE from 'three'
//引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls" ;
//目标： 使用控制器查看3d物体
// 创建场景
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.Geometry(10, 10, 10);
//创建材质
const cubeMaterial = new THREE.MashBasicMaterial({ color: 0xffff00 });
//根据材质和几何体创建物体
cosnt cube = new THREE.Mesh(cubeGeometry , cubeMaterial);
//将创建好的物体添加到场景中去
scene.add(cube);
//初始化渲染器
const renderer = new THREE.Renderer()
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth , window.innerHeight);
//监听屏幕大小改变，修改渲染器的宽高比和相机比例
window.addEventListener('resize',()=>{
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight ;
camera.updateProjectionMatrix()
});
//将webgl渲染的canvas添加到body上去
document.body.appendChild(renderer.domElement);
//创建轨道控制器
const controls = new OrbitControls(camera , renderer.domElement);
//添加坐标辅助器
const axesHelper = new THREE.AxesHelper(10);
//将坐标辅助器添加到场景中去
scene.add(axesHelper)
function render() {
renderer.renderer(scene,camera );
//渲染下一帧的时候就会调用render函数
requsetAnimationFrame(render)
};
render()
通过以上代码，就可以创建一个Three的项目，创建出来了第一个3d场景，并且添加了一个正方体
3.动画
3.1设置物体移动
function render (){
//每一帧都去修改物体的positon
cube.positon.x += 0.1
if(cube.positon.x > 5){
cube.position.x = 0
}
renderer.render(scene,camera);
//渲染下一帧的时候就用自动调用render函数
requestAnimationFrame(render);
}
render()3.2 设置物体缩放
//缩放xyz轴的坐标
cube.scale.set(2,2,2)
//或者缩放x轴
cube.scale.x = 5
3.3 设置物体旋转
//设置旋转
//Math.PI是180度
cube.rotation.set(Math.PI / 4, 0,0)3.4 requestAnimationFrame（请求动画帧）
function render (time) {
//每一帧都去修改物体的position
let t = timer / 100 % 5 ; // %5 用来设置反复动画 利用求余
move(t)
renderer.render(scene,camera)
requestAnimationFrame(render);
}
render();
render函数默认传入一个time参数，利用改参数，可以计算物体运动的实际时间，进而设置更精确的动画效果
