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

最新推荐文章于 2024-05-04 13:11:42 发布
最新推荐文章于 2024-05-04 13:11:42 发布
阅读量435 收藏 3
点赞数 1
分类专栏： three.js 文章标签： javascript 矩阵 科技
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43845137/article/details/128599478
版权
该系列教程介绍了Three.js中关于几何体和材质纹理的使用，包括BufferGeometry设置顶点创建矩阵、生成炫酷三角形科技物体、常见网格几何体、理解材质与纹理的属性（如平移、旋转、透明度、AO环境遮挡、金属度和粗糙度）、法线贴图以及纹理加载进度的监控等，旨在帮助读者掌握WebGL渲染库Three.js的基础知识。
摘要由CSDN通过智能技术生成

目录

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)
})
  • 效果
    在这里插入图片描述
小小亮01
关注
专栏目录
three - 4 - threejs提供的内置几何体
weixin_38245947的博客
05-26 1977
认识three.js 提供的内置几何体 three.js 的内置几何体大致可分成以下几类： 二维几何体 PlaneGeometry 矩形平面 CircleGeometry 圆形平面 RingGeometry 圆环平面 ShapeGeometry 二维图形 三维几何体 BoxGeometry 立方体 TetrahedronGeometry 四面体 OctahedronGeometry 八面体 DodecahedronGeometry 十二面体 IcosahedronGeometry 二十面体 Po
Three.js 快速入门教程 05 - 几何体 材质 网格模型
最新发布
最佳编码阿柚的博客
05-16 532
在第一篇教程中已经简要介绍过了几何体、材质和网格模型的含义与联系，即几何体用来表示三维物体的几何形状，材质用来表示物体的外观效果，网格模型则是将几何体和材质组合起来，作为 Three.js 的一个基本物体单位，可以被添加进场景里。对于一个 Three.js 项目来说，不仅可以通过加载模型文件的方式添加模型，还可以通过纯代码的方向添加模型，又或者是通过代码对模型文件的部分参数进行调整。本篇将详细讲解这部分的内容。
three.js中点生成矩阵方法
10-25 365
正常情况用threejs 点生成matrix4,方法为: 例如生成饶Y轴旋转的矩阵我们要的结果为: [cos,　　0, 　　-sin, 　　0, 0, 　　 1,　　 0, 　　　0, sin,　　0,　　 cos,　　0, 0,　　 0,　　 0,　　 1] 代码 getMatrix4FromY(rotateAngle: num...
ThreeJS:常见几何体与基础材质入门
席木木的博客
05-04 1202
ThreeJS:常见几何体与基础材质入门
21 Three.js使用顶点绘制立方体
现在学习也不晚
08-05 8224
我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。 three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型 下面是我的个人一个案例。 案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/23.html 首先，我创建了一个空白的形状： /...
three.js 利用点面绘制几何体
quitv的博客
06-06 594
使用THREE.BufferAttribute绘制几何体
Three.js学习之几何形状
10-21
上述代码中，首先创建了一个基础材质，并指定了颜色和线框模式，然后利用THREE.CubeGeometry生成了一个立方体几何体，并将材质应用到该几何体上。最后，创建了一个Mesh对象，并将其添加到了场景中。 总之，Three.js...
Three.js利用顶点绘制立方体的方法详解
11-28
通过这个例子，我们学习了如何使用Three.js的几何、顶点、面和材质等概念来创建一个简单的3D立方体。这个过程可以扩展到更复杂的3D模型，只需定义更多的顶点和面，以及应用不同的材质和光照效果。在Three.js中，理解...
Three.js入门之hello world以及如何绘制线
10-19
7. **材质与网孔**：`THREE.MeshBasicMaterial()` 是一种基础材质，用于指定物体的颜色或纹理。`THREE.Mesh()` 将几何体与材质结合，创建一个可渲染的3D对象。 8. **添加物体到场景**：将立方体添加到场景中，以便在...
three.js之光源
youhebuke225的博客
12-08 3455
光源是对于自然界光照的模拟，往往为了更好的渲染场景，需要设置不同的光源，设置不同的光照强度。
three.js（2）：第一个3d场景（几何体、透明度和高光、旋转、鼠标操作）
spider_man
08-24 1101
1，第一个3D图形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个three.js文件_WebGL三维场景</title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ }
Three.js本地矩阵.materix和世界矩阵.matrixWorld
u014291990的博客
11-09 4693
Three.js本地矩阵.materix和世界矩阵.matrixWorld 在学习本地矩阵.materix之前你应该先对WebGL的旋转、平移、缩放等变换矩阵有一定的认知，在了解世界矩阵.matrixWorld之前你应该现对象Three.js中层级模型的概念有一定的了解，Threejs如何通过Group来创建一个父子关系层级模型。 一个对象的本地矩阵.materix包含了该对象的旋转、平移和缩放变...
ThreeJS:Geometry与顶点|索引|面
席木木的博客
05-03 1495
ThreeJS:Geometry与顶点|索引|面.
Three.js访问几何体顶点数据
u014291990的博客
11-29 3690
Three.js访问几何体顶点数据 本文是Three.js电子书的2.7节 实际开发项目的时候，可能会加载外部模型，有些时候需要获取模型几何体的顶点数据，如果想获取几何体的顶点数据首先要熟悉three.js几何体的结构。 访问几何体顶点数据其实很简单，刚开始学习不用刻意记忆，直接查看threejs文档，就像访问javascript对象的属性一样。 测试BoxGeometry 调用BoxGeomet...
学习Three.js——几何体(Geometry)
a13602955218的博客
12-23 4862
几何体 定义顶点： 点由THREE.Vector(x,y,z)定义 var vertices = [ new THREE.Vector3(1,3,1), new THREE.Vector3(1,3,-1), new THREE.Vector3(1,-1,1), new THREE.Vector3(1,-1,-1), new THREE.Vector3(-1,...
【Three.js】五、three.js中的材质——Material
MAXLZ的博客
09-10 2720
【Three.js】五、three.js中的材质——Material一、 three.js中的材质就是几何体表面的材料。 一、
Three.js 自定义创建点，线，面，Geometry，法线，UV坐标，顶点颜色
qq_39503511的博客
12-13 5785
Three.js 自定义创建点，线，面，Geometry概述顶点使用顶点来创建面面使用顶点颜色渲染面使用面颜色渲染 概述 此章将介绍如何自定义创建点，线，面，Geometry，法线，UV坐标，顶点颜色。 任何一个模型都是由一个一个顶点来组成的，然后由顶点来组成线和面来生成的，在Three.js中，我们使用new THREE.Vector3()来创建一个顶点。 顶点 现在我们来创建4个顶点，顶点坐标分别为(0, 0, 0)，(10, 0, 0)， (0, 0, 10)， (10, 0, 10) le
108 THREE.JS 使用矩阵对3D对象进行位置设置
现在学习也不晚
01-22 5495
大家都知道，对模型操作常用的就是 平移，旋转，缩放三种操作。 正常我们使用Three.js的时候，都是通过模型对象上面的position rotation scale进行设置相关。Three.js通过这三种依次操作是先进行缩放，然后再旋转，最后再设置的位置。 那我们是否能够自己通过矩阵实现对模型的变换呢，答案是可以的，Three.js内部实现了矩阵的使用： 任何3D物体Object3D都有三个关联...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值