webGL相关学习（THREE.js相关）

1、webGL是什么？

3D绘图协议，依赖于HTML5 canvas容器而展示3D模型

2、使用three.js渲染一个场景和物体最基本的要素：

场景、摄像机、物体、渲染器

import * as THREE from 'three'
//1、创建场景
const scene =new THREE.Scene()
// 2、创建相机
const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.set(0,0,10)
//3、将摄像机添加至场景
scene.add(camera)
//4、创建物体
const cubeGeometry=new THREE.BoxGeometry(1,1,1)
const cubeMaterial=new THREE.MeshBasicMaterial({color:'#fff000'})
const cube=new THREE.Mesh(cubeGeometry,cubeMaterial)
scene.add(cube)

//5、初始化渲染器
const render=new THREE.WebGL1Renderer()
render.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(render.domElement)
render.render(scene,camera)

3、创建轨道控制器，实现360°查看物体

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
//设置控制器阻尼效果，使其更逼真
controls.enableDamping=true

必须传入2个参数：

相机，让哪一个相机围绕目标运动。默认目标是原点。立方体在原点处。

渲染的画布dom对象，用于监听鼠标事件控制相机的围绕运动。 

4、requestAnimationFrame 函数实现实时更新画面内容

function render() {
    controls.update()
    renderer.render(scene, camera)
    //   渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render)
  }
  
  render(); 

5、根据尺寸变化实现自适应画面

 //监听画面变化，重新渲染画面
  window.addEventListener('resize',()=>{
    //更新摄像机的投影矩阵
    camera.updateProjectionMatrix()
    //更新渲染器
    renderer.setSize(window.innerWidth,window.innerHeight)
    //设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio)
  })

6、通过js控制画布进入全屏和退出全屏

 window.addEventListener('click',()=>{
    const fullscreenElement=document.fullscreenElement
    if(!fullscreenElement){
      renderer.domElement.requestFullscreen()
    }else{
      //退出全屏使用document元素
     document.exitFullscreen()
    }
  })

小tips： 

1、planel加图片贴图，只能通过require方式引入图片，通过绝对路径引入不报错，但是图片无法显示

2、gltf和glb格式，其实是一样的。

未完。。。持续更新中