关于threejs开发的注意点

一、场景的注意点

• 场景
  • background 背景
  • environment 环境

let scene = new Three.Scene
scene.background = background
scene.environment = environment 

二、相机的注意点

• 相机
  • 透视相机 PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)
  • fov : number 摄像机视锥体垂直视野角度
  • aspect : number 摄像机视锥体长宽比
  • near : number 摄像机视锥体近端面
  • far :number 摄像机视锥体远端面

let camera = new Three.PerspectCamera(75, windows.innerWidth / windows.innerHeigth, 0.1, 1000)
camera.position.set(0,100,0)
scene.add(camera)

三、坐标辅助器

• 坐标

let axes = new Three.axesHelper(50)
scene.add(axes)

四、状态检测器

• 状态

stats = new Stats()
canvas.value.appendChild(stats.dom)

五、渲染器

• 1.声明渲染器 Three.WebGLRenderer()
  • antialias 值: false/true 含义:是否开启反锯齿，设置为true开启反锯齿。
  • percision 值: highp/mediump/lowp 含义: 是否可以设置背景透明色
  • premultipliedAlpha: 值:false/true
  • preserveDrawingBuffer: 值：true/false 含义：是否保存绘图缓冲，若设为true，则可以提取canvas绘图的缓冲
  • maxLights: 值：数值int 含义：最大灯光数，我们的场景中最多能够添加多少个灯光。
• 2.制定渲染器的宽高，我们用renderer.setSize(width,height)来设置
• 3.追加生成的canvas元素到容器中。canvas对象的获取方法为renderer.domElement
• 4.设置canvas背景色(clearColor)和背景色透明度(clearAlpha),renderer.setClearColor(clearColor,clearAlpha);

let renderer = new Three.WebGLRenderer()
renderer.setSize(width,height)
canvas.value.appendChild(renderer.domElement)
renderer.render(scene,camera)

六、轨道控制器

• 轨道控制器

let controls = new OribitControls(camera,renderer.domElement)
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true
//是否可以缩放
controls.enableZoom = true
//是否自动旋转
controls.autoRotate = false
//是否开启右键拖拽
controls.enablePan = true

七、材质

• 材质

let geometry = new Three.BufferGeometry()
let position = new FloatArray(pointCount * 3)
geometry.setAttribute("position",new Three.BufferAttribute(position,3))

let textureLoader = new Three.TextureLoader()
let rainTexture = textureLoader.load(raining)

let material = new Three.PointMaterial({
    size: size ,//大小
    transparent: transparent, //材质是否有透明度，配合opacity设置透明度
    opacity: opacity, //透明度
    vertexColors: vertexColor,//顶点着色
    color: color, //颜色
    sizeAttenuation: sizeAttenuation,//指定点的大小是否因相机深度而衰减
    depthTest:true,//渲染此材质时候启用的深度测试
    depthWrite: false,//渲染此材质是否对深度缓冲区有任何影响
    map:rainTexture ,//贴图
    alphaMap:rainTexture,//贴图灰度
    blending: Three.AdditiveBlending,//材质混合模式
})
//生成点
let point = new Three.Points(geometry,material)
//添加到场景
scene.add(point)

八、监听画面变化更新渲染画面

• 更新three的画面

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

九、着色器变量

• 着色器变量
  • 1.uniform 全局变量 可以传入顶点着色器，也可以传入片元着色器，在整个渲染过程中保持不变的变量。
  • 2.varying 是从顶点着色器传递到片元着色器的变量。我们需要确保在两个着色器中变量的类型和命名完全一致。
  • 3.attributes与每个顶点关联的变量。例如，顶点位置，法线和顶点颜色都是存储在attributes中的数据。它只能在顶点着色器获取。
  • 4.three.js在顶点着色器中定义好了一下关于顶点信息的变量，如position、modelViewMatrix等
  • 5.创建vPosition变量把顶点信息传入片元着色器。
  • 6.在片元着色器中获取time全局变量，用于在不同时间修改颜色。
  • 7.根据顶点坐标来判断几何体要修改颜色的位置。

  // 顶点着色器代码
  const vertexShader = `
  varying vec3 vPosition;// 创建变量 在片元着色器 中使用
  void main() {
      vPosition = position;// 赋值 顶点坐标
      // projectionMatrix 是投影变换矩阵 modelViewMatrix 是相机坐标系的变换矩阵 position 顶点坐标
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
  `
  // mod(x,y)返回x – y * floor (x/y)，即求模计算%
  // 片元着色器代码
  const fragmentShader = `
  varying vec3 vPosition;// 获取顶点着色器 设置的变量
  uniform float time;// 获取传入的 全局变量
  void main() {
    float time = mod(time, 3.0); 
    if(vPosition.x > 0.0 && vPosition.y > 0.0){
      if(time < 1.0){
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      } else if(time >= 1.0 && time < 2.0){
        gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
      }else{
        gl_FragColor = vec4(1.0, 0.7, 0.0, 1.0);
      }
    }else{
      gl_FragColor=vec4(0.2, 0.2, 0.2, 1.0);
    }
  }
  `