three.js 之 入门篇 5之几何体的认知（ 顶点创建矩阵、炫酷三角形科技物体、基础网格材质 material ）

news2025/2/28 6:16:09

目录

  • three.js 之 入门篇 5之几何体的认知
    • 01BufferGeometry设置顶点创建矩阵
    • 02 生产炫酷三角形科技物体
    • 03 常见的网格几何体 geometry
    • 04 基础网格材质 material
      • 04-1 初识别材质与纹理
      • 04-2 初识别材质与纹理 （ 平移、旋转 ）
      • 04-3 纹理显示设置（ 缩小滤镜 ） Textures
      • 04-4 设置纹理的透明纹理
      • 04-5 AO环境遮挡图与强度（ AO对于光的遮挡 ）
      • 04-6 标准网格材质与光照物理效果 - AmbientLight
      • 04-7 置换贴图与顶点细分设置 -
      • 04-7 设置粗糙度与粗糙度贴图
      • 04-8 设置金属度与金属贴图
      • 04-9 法线贴图
      • 04-10 获取纹理贴纸 - 网址
      • 04-11 纹理加载进度情况

three.js 之 入门篇 5之几何体的认知

01BufferGeometry设置顶点创建矩阵

  • 官网
import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 添加物体
// 创建几何体
// 01BufferGeometry设置顶点创建矩阵 start
const geometry = new THREE.BufferGeometry( 1, 1, 1 ); // 盒子的大小
const vertices = new Float32Array([
  -1.0,-1.0,1.0, // x y z
  1.0,-1.0,1.0,
  1.0,1.0,1.0,
  1.0,1.0,1.0,
  -1.0,1.0,1.0,
  -1.0,-1.0,1.0
])
// 一维数组，3个值
geometry.setAttribute('position',new THREE.BufferAttribute(vertices,3))
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体和材质创建物体
const mesh = new THREE.Mesh(geometry,material)
// 把几何体添加到场景之中
scene.add(mesh)
// 01BufferGeometry设置顶点创建矩阵 end


// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 011 应用图形用户界面更改变量 end

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

在这里插入图片描述

在这里插入图片描述

02 生产炫酷三角形科技物体

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 添加物体
// 创建几何体
for( let i = 0 ; i < 50 ; i++) {
  const geometry = new THREE.BufferGeometry(); // 三角形的面
  const positionArray = new Float32Array(9)
  // 每一个三角形，都需要3个顶点，每个顶点需要3个值
  for (let j = 0; j < 9; j++ ){
    positionArray[j] = Math.random() * 10 - 5
  }
  geometry.setAttribute('position',new THREE.BufferAttribute(positionArray,3))
  let color = new THREE.Color(Math.random(),Math.random(),Math.random())
  // 一维数组，3个值
  
  const material = new THREE.MeshBasicMaterial( {color: color,transparent:true, opacity:0.5} ); // 盒子的材质 
  // 根据几何体和材质创建物体
  const mesh = new THREE.Mesh(geometry,material)
  // 把几何体添加到场景之中
  scene.add(mesh)
}
// 02 生产炫酷三角形科技物体 satrt


// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 011 应用图形用户界面更改变量 end

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
  • 效果
    在这里插入图片描述

03 常见的网格几何体 geometry

04 基础网格材质 material

04-1 初识别材质与纹理

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 04 初识别材质与纹理  start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const ColorTextures = texttrueLoader.load('./textures/loader1.webp') // 纹理贴纸
// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1)
const basicMatterials = new THREE.MeshBasicMaterial({
  color:'#ffff00',
  map:ColorTextures
})
const mesh = new THREE.Mesh(meshGeometry,basicMatterials)
scene.add(mesh)
// 04 初识别材质与纹理  end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 011 应用图形用户界面更改变量 end

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
  • 效果
    在这里插入图片描述

04-2 初识别材质与纹理 （ 平移、旋转 ）

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 04 纹理属性之 平移、旋转、重复  start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const colorTextures = texttrueLoader.load('./textures/loader2.webp') // 纹理贴纸
// 纹理的平移
// colorTextures.offset.x = 0.3; 
// colorTextures.offset.y = 0.3; // colorTextures.offset.set(0.3,0.3)
// 纹理的旋转
// colorTextures.center.set(0.5,0.5) // 设置旋转中心
// colorTextures.rotation = Math.PI / 4
// 纹理的重复 S-y轴 T-x轴
colorTextures.repeat.set(2,3)
colorTextures.wrapS = THREE.MirroredRepeatWrapping // 纹理镜像重复
colorTextures.wrapT = THREE.RepeatWrapping // 纹理无线重复

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1)
const basicMatterials = new THREE.MeshBasicMaterial({
  color:'#ffff00',
  map:colorTextures
})
const mesh = new THREE.Mesh(meshGeometry,basicMatterials)
scene.add(mesh)
// 04 纹理属性之 平移、旋转、重复   end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 011 应用图形用户界面更改变量 end

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
  • 效果
    在这里插入图片描述

04-3 纹理显示设置（ 缩小滤镜 ） Textures

  • NearestFilter返回与指定纹理坐标（在曼哈顿距离之内）最接近的纹理元素的值。
  • LinearFilter为标准来从每个mipmap中生成纹理值。最终的纹理值是这两个值的加权平均值。
import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 05 设置纹理显示算法和mipmap start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const colorTextures = texttrueLoader.load('./textures/loader2.webp') // 纹理贴纸

// 纹理显示设置
// colorTextures.minFilter = THREE.NearestFilter
// colorTextures.magFilter = THREE.NearestFilter
colorTextures.minFilter = THREE.LinearFilter
colorTextures.magFilter = THREE.LinearFilter

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1)
const basicMatterials = new THREE.MeshBasicMaterial({
  color:'#ffff00',
  map:colorTextures
  // map:colorTextures1
})
const mesh = new THREE.Mesh(meshGeometry,basicMatterials)
scene.add(mesh)
// 05 设置纹理显示算法和mipmap end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 011 应用图形用户界面更改变量 end

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

04-4 设置纹理的透明纹理

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 05 设置纹理的透明纹理 start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const colorTextures = texttrueLoader.load('./textures/door.png') // 纹理贴纸
const whiteAplhaTextures = texttrueLoader.load('./textures/doorWhite.png') // 纹理的透明纹理？？？

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1)
const basicMatterials = new THREE.MeshBasicMaterial({
  color:'#ffff00',
  map:colorTextures,
  alphaMap:whiteAplhaTextures,
  transparent:true,
  // opacity:0.5
})
const mesh = new THREE.Mesh(meshGeometry,basicMatterials)
scene.add(mesh)
// 添加平面
const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(1,1),basicMatterials)
plane.position.set(3,0,0)
scene.add(plane)
// 05 设置纹理的透明纹理 end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 011 应用图形用户界面更改变量 end

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
  • 效果
    在这里插入图片描述

04-5 AO环境遮挡图与强度（ AO对于光的遮挡 ）

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 06 AO环境遮挡图与强度（ AO对于光的遮挡 ） start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const colorTextures = texttrueLoader.load('./textures/door.png') // 纹理贴纸
const whiteAplhaTextures = texttrueLoader.load('./textures/doorWhite.png') // 纹理的透明纹理？？？
const doorAoTextrues = texttrueLoader.load('./textures/doorAo.png')

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1)
const basicMatterials = new THREE.MeshBasicMaterial({
  color:'#ffff00',
  map:colorTextures,
  alphaMap:whiteAplhaTextures,
  transparent:true,
  aoMap:doorAoTextrues
  // opacity:0.5
})
const mesh = new THREE.Mesh(meshGeometry,basicMatterials)
scene.add(mesh)
// 给mesh平面设置第二组 uv
meshGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(meshGeometry.attributes.uv.array,2)
)

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1,1)
const plane = new THREE.Mesh(planeGeometry,basicMatterials)
plane.position.set(3,0,0)
scene.add(plane)
// 给平面设置第二组 uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array,2)
)
// 06 环境遮挡图与强度 end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 011 应用图形用户界面更改变量 end

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
  • 效果
    在这里插入图片描述

04-6 标准网格材质与光照物理效果 - AmbientLight

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 07 标准网格材质与光照物理效果 start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const colorTextures = texttrueLoader.load('./textures/door.png') // 纹理贴纸
const whiteAplhaTextures = texttrueLoader.load('./textures/doorWhite.png') // 纹理的透明纹理？？？
const doorAoTextrues = texttrueLoader.load('./textures/doorAo.png')

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1)
// 材质
const materials = new THREE.MeshStandardMaterial({
  color:'#ffff00',
  map:colorTextures,
  alphaMap:whiteAplhaTextures,
  transparent:true,
  aoMap:doorAoTextrues
})
const mesh = new THREE.Mesh(meshGeometry,materials)
scene.add(mesh)
// 给mesh平面设置第二组 uv
meshGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(meshGeometry.attributes.uv.array,2)
)
// 添加灯光 start
// 环境光
const light = new THREE.AmbientLight( 0xffffff,0.8 ); // soft white light
scene.add( light );
// 平行光
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(10,10,10) // 光源位置
scene.add( directionalLight );
// 添加灯光 end

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1,1)
const plane = new THREE.Mesh(planeGeometry,materials)
plane.position.set(3,0,0)
scene.add(plane)
// 给平面设置第二组 uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array,2)
)
// 07 标准网格材质与光照物理效果 end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)
// 011 应用图形用户界面更改变量 end

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
  • 效果
    在这里插入图片描述

04-7 置换贴图与顶点细分设置 -

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 07 置换贴图与顶点细分设置 start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const colorTextures = texttrueLoader.load('./textures/door.png') // 纹理贴纸
const whiteAplhaTextures = texttrueLoader.load('./textures/doorWhite.png') // 纹理的透明纹理？？？
const doorAoTextrues = texttrueLoader.load('./textures/doorAo.png')
const height = texttrueLoader.load("./textures/height.png") // 置换贴图

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1,100,100,100) // 置换贴图之顶点细分
// 材质
const materials = new THREE.MeshStandardMaterial({
  color:'#ffff00',
  map:colorTextures,
  alphaMap:whiteAplhaTextures,
  transparent:true,
  aoMap:doorAoTextrues,
  displacementMap:height, // 置换贴图
  displacementScale:0.1 ,// 置换贴图之影响程度

})
const mesh = new THREE.Mesh(meshGeometry,materials)
scene.add(mesh)
// 给mesh平面设置第二组 uv
meshGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(meshGeometry.attributes.uv.array,2)
)
// 添加灯光 start
// 环境光
const light = new THREE.AmbientLight( 0xffffff,0.8 ); // soft white light
scene.add( light );
// 平行光
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(10,10,10) // 光源位置
scene.add( directionalLight );
// 添加灯光 end

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1,1)
const plane = new THREE.Mesh(planeGeometry,materials)
plane.position.set(2,0,0)
scene.add(plane)
// 给平面设置第二组 uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array,2)
)
// 07 置换贴图与顶点细分设置 end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

04-7 设置粗糙度与粗糙度贴图

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 010 设置粗糙度与粗糙度贴图 start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const colorTextures = texttrueLoader.load('./textures/door.png') // 纹理贴纸
const whiteAplhaTextures = texttrueLoader.load('./textures/doorWhite.png') // 纹理的透明纹理？？？
const doorAoTextrues = texttrueLoader.load('./textures/doorAo.png')
const height = texttrueLoader.load("./textures/height.png") // 置换贴图
const roughnessTextrues = texttrueLoader.load("./textures/roughness.png") // 粗糙贴图

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1,100,100,100) // 置换贴图之顶点细分
// 材质
const materials = new THREE.MeshStandardMaterial({
  color:'#ffff00',
  map:colorTextures,
  alphaMap:whiteAplhaTextures,
  transparent:true,
  aoMap:doorAoTextrues,
  displacementMap:height, // 置换贴图
  displacementScale:0.1 ,// 置换贴图之影响程度
  roughness: 1, // 粗糙度
  roughnessMap:roughnessTextrues // 粗糙贴图

})
const mesh = new THREE.Mesh(meshGeometry,materials)
scene.add(mesh)
// 给mesh平面设置第二组 uv
meshGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(meshGeometry.attributes.uv.array,2)
)
// 添加灯光 start
// 环境光
const light = new THREE.AmbientLight( 0xffffff,0.8 ); // soft white light
scene.add( light );
// 平行光
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(10,10,10) // 光源位置
scene.add( directionalLight );
// 添加灯光 end

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1,1)
const plane = new THREE.Mesh(planeGeometry,materials)
plane.position.set(2,0,0)
scene.add(plane)
// 给平面设置第二组 uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array,2)
)
// 010 设置粗糙度与粗糙度贴图 end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

04-8 设置金属度与金属贴图

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 011 设置金属度与金属贴图 start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const colorTextures = texttrueLoader.load('./textures/door.png') // 纹理贴纸
const whiteAplhaTextures = texttrueLoader.load('./textures/doorWhite.png') // 纹理的透明纹理？？？
const doorAoTextrues = texttrueLoader.load('./textures/doorAo.png')
const height = texttrueLoader.load("./textures/height.png") // 置换贴图
const roughnessTextrues = texttrueLoader.load("./textures/roughness.png") // 粗糙贴图
const metalnessTexture = texttrueLoader.load("./textures/metalness.png") // 金属贴图

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1,100,100,100) // 置换贴图之顶点细分
// 材质
const materials = new THREE.MeshStandardMaterial({
  color:'#ffff00',
  map:colorTextures,
  alphaMap:whiteAplhaTextures,
  transparent:true,
  aoMap:doorAoTextrues,
  displacementMap:height, // 置换贴图
  displacementScale:0.1 ,// 置换贴图之影响程度
  roughness: 1, // 粗糙度
  roughnessMap:roughnessTextrues, // 粗糙贴图
  metalness:1 , // 金属度
  metalnessMap:metalnessTexture , // 金属贴图

})
const mesh = new THREE.Mesh(meshGeometry,materials)
scene.add(mesh)
// 给mesh平面设置第二组 uv
meshGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(meshGeometry.attributes.uv.array,2)
)
// 添加灯光 start
// 环境光
const light = new THREE.AmbientLight( 0xffffff,0.8 ); // soft white light
scene.add( light );
// 平行光
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(10,10,10) // 光源位置
scene.add( directionalLight );
// 添加灯光 end

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1,1)
const plane = new THREE.Mesh(planeGeometry,materials)
plane.position.set(2,0,0)
scene.add(plane)
// 给平面设置第二组 uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array,2)
)
// 011 设置金属度与金属贴图 end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

+效果
在这里插入图片描述
在这里插入图片描述

04-9 法线贴图

  • 法线贴图就是在原物体的凹凸表面的每个点上均作法线，通过RGB颜色通道来标记法线的方向，你可以把它理解成与原凹凸表面平行的另一个不同的表面，但实际上它又只是一个光滑的平面。

  • 对于视觉效果而言，它的效率比原有的凹凸表面更高，若在特定位置上应用光源，可以让细节程度较低的表面生成高细节程度的精确光照方向和反射效果。

  • 设置法线贴图，让门的凸显门的凹凸感，立体感更加逼真

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 012 法线贴图 start
// 导入纹理
const texttrueLoader = new THREE.TextureLoader()
const colorTextures = texttrueLoader.load('./textures/door.png') // 纹理贴纸
const whiteAplhaTextures = texttrueLoader.load('./textures/doorWhite.png') // 纹理的透明纹理？？？
const doorAoTextrues = texttrueLoader.load('./textures/doorAo.png')
const height = texttrueLoader.load("./textures/height.png") // 置换贴图
const roughnessTextrues = texttrueLoader.load("./textures/roughness.png") // 粗糙贴图
const metalnessTexture = texttrueLoader.load("./textures/metalness.png") // 金属贴图
const normalTexture = texttrueLoader.load('./textures/normal.png') // 导入法线贴图

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1,100,100,100) // 置换贴图之顶点细分
// 材质
const materials = new THREE.MeshStandardMaterial({
  color:'#ffff00',
  map:colorTextures,
  alphaMap:whiteAplhaTextures,
  transparent:true,
  aoMap:doorAoTextrues,
  displacementMap:height, // 置换贴图
  displacementScale:0.1 ,// 置换贴图之影响程度
  roughness: 1, // 粗糙度
  roughnessMap:roughnessTextrues, // 粗糙贴图
  metalness:1 , // 金属度
  metalnessMap:metalnessTexture , // 金属贴图
  normalMap:normalTexture, // 法线贴图

})
const mesh = new THREE.Mesh(meshGeometry,materials)
scene.add(mesh)
// 给mesh平面设置第二组 uv
meshGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(meshGeometry.attributes.uv.array,2)
)
// 添加灯光 start
// 环境光
const light = new THREE.AmbientLight( 0xffffff,0.8 ); // soft white light
scene.add( light );
// 平行光
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(10,10,10) // 光源位置
scene.add( directionalLight );
// 添加灯光 end

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1,1)
const plane = new THREE.Mesh(planeGeometry,materials)
plane.position.set(2,0,0)
scene.add(plane)
// 给平面设置第二组 uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array,2)
)
// 012 法线贴图 end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
  • 效果
    在这里插入图片描述

04-10 获取纹理贴纸 - 网址

  • 纹理贴纸

04-11 纹理加载进度情况

  • 单张的纹理加载进度查看
  • 多张纹理加载进度查看
import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"
// 导入 dat.gui
import * as dat from "dat.gui"

// 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 );

// 013 纹理加载进度情况 start
const div = document.createElement('div')
div.style.width = "200px"
div.style.height = "200px"
div.style.position = 'fixed'
div.style.right = 0
div.style.top = 0
div.style.color = '#fff'
document.body.appendChild(div)
let event = {}
// 单张纹理图的加载 start
event.onLoad = function () {
  console.log('图片加载完成');
}
// onProgress — 将在加载过程中进行调用
event.onProgress = function (url,num,total) {
  let val = ((num / total) *100).toFixed(2) +"%"
  console.log('将在加载过程中进行调用',url,"num",num,"total",total,"加载进度百分百",val);
  div.innerHTML = val
}
// onError — 在加载错误时被调用
event.onError = function (e) {
  console.log('在加载错误时被调用',e);
}
// 单张纹理图的加载 end
// 设置加载管理器
const loadingManager = new THREE.LoadingManager( event.onLoad, event.onProgress, event.onError)
// 导入纹理
const texttrueLoader = new THREE.TextureLoader(loadingManager)
// const colorTextures = texttrueLoader.load('./textures/door.png',event.onLoad,event.onProgress,event.onError) // 纹理贴纸 + 单张贴纸纹理图加载
const colorTextures = texttrueLoader.load('./textures/door.png') // 纹理贴纸
const whiteAplhaTextures = texttrueLoader.load('./textures/doorWhite.png') // 纹理的透明纹理？？？
const doorAoTextrues = texttrueLoader.load('./textures/doorAo.png')
const height = texttrueLoader.load("./textures/height.png") // 置换贴图
const roughnessTextrues = texttrueLoader.load("./textures/roughness.png") // 粗糙贴图
const metalnessTexture = texttrueLoader.load("./textures/metalness.png") // 金属贴图
const normalTexture = texttrueLoader.load('./textures/normal.png') // 导入法线贴图

// 添加物体
const meshGeometry = new THREE.BoxBufferGeometry(1,1,1,100,100,100) // 置换贴图之顶点细分
// 材质
const materials = new THREE.MeshStandardMaterial({
  color:'#ffff00',
  map:colorTextures,
  alphaMap:whiteAplhaTextures,
  transparent:true,
  aoMap:doorAoTextrues,
  displacementMap:height, // 置换贴图
  displacementScale:0.1 ,// 置换贴图之影响程度
  roughness: 1, // 粗糙度
  roughnessMap:roughnessTextrues, // 粗糙贴图
  metalness:1 , // 金属度
  metalnessMap:metalnessTexture , // 金属贴图
  normalMap:normalTexture, // 法线贴图
})
const mesh = new THREE.Mesh(meshGeometry,materials)
scene.add(mesh)
// 给mesh平面设置第二组 uv
meshGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(meshGeometry.attributes.uv.array,2)
)
// 添加灯光 start
// 环境光
const light = new THREE.AmbientLight( 0xffffff,0.8 ); // soft white light
scene.add( light );
// 平行光
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(10,10,10) // 光源位置
scene.add( directionalLight );
// 添加灯光 end

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1,1)
const plane = new THREE.Mesh(planeGeometry,materials)
plane.position.set(2,0,0)
scene.add(plane)
// 给平面设置第二组 uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array,2)
)
// 013 纹理加载进度情况 end

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 设置控制器阻尼，让控制器更具有真是效果
controls.enableDamping = true
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// window双击事件的时候 
window.addEventListener('dblclick',()=>{
  // 010 调研js接口控制画布全屏和退出全屏
  const fullScreenElement = document.fullscreenElement;
  if ( !fullScreenElement ) {
    renderer.domElement.requestFullscreen() // 画布对象全屏
  } else {
    document.exitFullscreen()
  }
})

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

// 09 根据尺寸变化实现自适应画面
// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
  console.log('监听画面变化');
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的头部矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})
  • 效果
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/155559.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言——指针面试题详解

C语言——指针面试题详解

&#x1f412;个人主页&#xff1a;平凡的小苏&#x1f4da;学习格言&#xff1a;别人可以拷贝我的模式&#xff0c;但不能拷贝我不断往前的激情目录 1. 指针和数组笔试题解析 一维数组 字符数组 二维数组 2. 指针笔试题 笔试题1&#xff1a; 笔试题2&#xff1a; 笔试题…
阅读更多...
ffmpeg 颜色空间转换分析

ffmpeg 颜色空间转换分析

颜色空间转换有很多相关标准&#xff1a; https://docs.opencv.org/3.4.0/de/d25/imgproc_color_conversions.html https://www.itu.int/rec/R-REC-BT.601-4-199407-S/en ffmpeg命令行颜色空间转换是通过调用vf_scale中的swscale来进行转码。 我们通过gdb来调试ffmpeg. 首先编译…
阅读更多...
《Getting Started with NLP》chap11：Named-entity recognition

《Getting Started with NLP》chap11：Named-entity recognition

《Getting Started with NLP》chap11&#xff1a;Named-entity recognition 最近需要做一些NER相关的任务&#xff0c;来学习一下这本书的第十一章 文章目录《Getting Started with NLP》chap11&#xff1a;Named-entity recognition11.1 Named entity recognition: Definition…
阅读更多...
jar转成dex文件

jar转成dex文件

jar转成dex文件 dx 可以利用android studio中的dx工具。 可以看到android的tool安装位置： 在此路径下的如下目录有dx.bat，这个正是我们需要使用的工具。 D:\sdk\build-tools\30.0.3将dx.bat添加到环境变量 基本指令 > dx --dex --output 输出路径 待转化的jar包C
阅读更多...
高性能网络模式：Reactor 和 Proactor

高性能网络模式：Reactor 和 Proactor

文章目录演进多 Reactor 多进程 / 线程Proactor总结演进 如果要让服务器服务多个客户端&#xff0c;那么最直接的方式就是为每一条连接创建线程。其实创建进程也是可以的&#xff0c;原理是一样的&#xff0c;进程和线程的区别在于线程比较轻量级些&#xff0c;线程的创建和线…
阅读更多...
【Dash搭建可视化网站】项目12：全球恐怖主义数据大屏制作步骤详解

【Dash搭建可视化网站】项目12：全球恐怖主义数据大屏制作步骤详解

全球恐怖主义数据大屏制作步骤详解1 项目效果图2 项目架构3 文件介绍和功能完善3.1 assets文件夹介绍3.2 app.py和index.py文件完善3.3 header.py文件完善3.4 filteritem.py文件完善3.5 api.py文件和api.ipynb文件完善3.6 staclbarline.py文件完善3.7 piechart.py文件完善3.8 m…
阅读更多...
IO多路复用之select、poll、epoll之间的区别总结

IO多路复用之select、poll、epoll之间的区别总结

一、IO多路复用基本概念 select、poll、epoll都是IO多路复用的机制。IO多路复用就是通过一种机制&#xff0c;让一个进程/线程可以监视多个描述符&#xff0c;一旦某个描述符就绪&#xff08;一般是读写就绪&#xff09;&#xff0c;能够通知应用程序进行相应的读写操作。 I/…
阅读更多...
并网逆变器学习笔记5---三电平DPWM

并网逆变器学习笔记5---三电平DPWM

参考文献&#xff1a;《中压三电平全功率风电变流器关键技术研究---任康乐》 1、调制策略分析 DPWM由于其在任意时刻均有一相钳位在某个电平&#xff0c;使得该相的功率器件不发生开关动作&#xff0c;因而可以大大降低开关损耗&#xff08;平均降低1/3&#xff09;&#xff…
阅读更多...
Java多线程案例——定时器

Java多线程案例——定时器

一&#xff0c;定时器1.定时器的概念定时器是Java开发中一个重要的组件&#xff08;功能类似于闹钟&#xff09;&#xff0c;可以指定一个任务在多长时间后执行&#xff08;尤其在网络编程的时候&#xff0c;如果网络卡顿很长时间没有响应用户的需求&#xff0c;此时可以使用定…
阅读更多...
分享｜UWB使用频段大幅收窄，新标准对于行业发展是好是坏？

分享｜UWB使用频段大幅收窄，新标准对于行业发展是好是坏？

近日&#xff0c;工信部无线电管理局发布了《超宽带&#xff08;UWB&#xff09;设备无线电管理规定&#xff08;征求意见稿&#xff09;》&#xff08;以下简称“新版《规定》”&#xff09;。 根据新版《规定》&#xff0c;未来国内UWB技术的使用频段为&#xff1a;7235-875…
阅读更多...
seo的基本知识（概述网站内部优化和外部优化）

seo的基本知识（概述网站内部优化和外部优化）

了解网站外部优化的4大重点 网站优化的时候都会重视网站的外部优化&#xff0c;所以网站外部优化的4大重点&#xff01;今天就来和大家说一说&#xff01; 1.高质量的内容和外链 未来的SEO道路高质量的有价值的内容是非常重要的&#xff0c;还有就是高质量的外链也是重要之…
阅读更多...
北大硕士LeetCode算法专题课-查找相关问题

北大硕士LeetCode算法专题课-查找相关问题

黑马算法面试专题 北大硕士LeetCode算法专题课-字符串相关问题 北大硕士LeetCode算法专题课-数组相关问题_​​​​​​ 北大硕士LeetCode算法专题课-基础算法查找_ 北大硕士LeetCode算法专题课-基础算法之排序_客 北大硕士LeetCode算法专题课---算法复杂度介绍_…
阅读更多...
Neo4j框架学习之一安装和使用

Neo4j框架学习之一安装和使用

文章目录1、何为Neo4j2、安装和使用2.1 安装2.2 基础概念1、何为Neo4j ​ Neo4j是一个高性能的NOSQL图形数据库&#xff0c;是一个嵌入式的、基于磁盘的&#xff0c;数据结果为网格(图)、具备完全的事务特性的Java持久化引擎。 数据结构 ​ 在一个图中包含两种基本的数据类型…
阅读更多...
从浏览器里输入URL构建你的前端知识体系

从浏览器里输入URL构建你的前端知识体系

嗨&#xff01;我是团子&#xff0c;好久不见~ 记得22年寒假复习八股的时候&#xff0c;一直在苦恼怎样才能把八股的内容真正的转换为自己的知识。毕竟光靠死记硬背每个知识点&#xff0c;是不能在面试中给面试官留下不错的印象的。后面在整理《浏览器里输入URL后发生了什么》…
阅读更多...
Stellarium 1.2 正式发布

Stellarium 1.2 正式发布

导读Stellarium 1.2 已发布。Stellarium 是一款免费开源 GPL&#xff08;自由软件基金会 GNU 通用公共许可证&#xff09;软件&#xff0c;它使用 OpenGL 图形接口对星空进行实时渲染。 软件可以模拟肉眼、双筒望远镜和小型天文等观察天空&#xff0c;根据观测者所处时间和位置…
阅读更多...
项目管理：项目经理如何创建项目日程计划表

项目管理：项目经理如何创建项目日程计划表

当项目经理接手项目后&#xff0c;要做好项目的日程安排&#xff0c;这是决定项目是否成功完成的最重要任务之一。 项目经理都希望项目按照制定好的进度计划完工&#xff0c;但在实际的情况中&#xff0c;总会有那么一两个项目会出现进度延迟的情况&#xff0c;管理者可以使用…
阅读更多...
忆享科技戟星安全实验室|OSS的STS模式授权案例

忆享科技戟星安全实验室|OSS的STS模式授权案例

戟星安全实验室忆享科技旗下高端的网络安全攻防服务团队.安服内容包括渗透测试、代码审计、应急响应、漏洞研究、威胁情报、安全运维、攻防演练等。本文约957字&#xff0c;阅读约需3分钟。前言《漏洞挖掘系列》将作为一个期刊持续更新&#xff0c;我们会将项目中所遇到的觉得有…
阅读更多...
图像编辑Photoshop 2023中文新

图像编辑Photoshop 2023中文新

Photoshop2023从照片编辑和合成到数字绘画、动画和图形设计-只要能想到&#xff0c;就能在Photoshop中创作出来。相信大家都有在用之前的版本&#xff0c;这款软件功能丰富&#xff0c;实用性很强&#xff0c;有着大量的功能用户都可以用上&#xff0c;不管是美化还是滤镜&…
阅读更多...
基于冲突搜索（CBS）的多智能体路径寻优（MAPF）

基于冲突搜索（CBS）的多智能体路径寻优（MAPF）

1 背景 1.1 问题描述 多智能体路径寻优( Multi-Agent Path Finding&#xff0c;MAPF )问题由一个无向无权图G ( V &#xff0c;E )和一组k个智能体组成&#xff0c;其中智能体有起始点和目标点。时间被离散化为时间步。在连续的时间步之间&#xff0c;每个智能体既可以移动到…
阅读更多...
Kafka生产者——消息发送流程，同步、异步发送API

Kafka生产者——消息发送流程，同步、异步发送API

生产者消息发送流程 发送原理 Kafka的Producer发送消息采用的是异步发送的方式。 在消息发送的过程中&#xff0c;涉及到了两个线程:main线程和Sender线程&#xff0c;以及一个线程共享变量:RecordAccumulator。 ①main线程中创建了一个双端队列RecordAccumulator&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023