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参数，利用改参数，可以计算物体运动的实际时间，进而设置更精确的动画效果