three.js常见知识点

添加三维坐标

const axesHelper = new THREE.AxesHelper(5)
axesHelper.position.y = 1
scene.add(axesHelper)

修改背景颜色

scene.background = new THREE.Color("#9aa7b1")

雾

// 第一个参数是雾的颜色，第二个是雾的最小距离，第三个是雾的最大距离
scene.fog = new THREE.Fog("#f5f3f2", 10, 15)

添加背景图片

素材网站：Poly Haven

素材分割：HDRI to CubeMap (matheowis.github.io)

注意：必须使用正方形图片才能生效!!!

// 创建一个立方体纹理,左右上下前后
const cubeTexture = new THREE.CubeTextureLoader().setPath('/textures/').load([
    "px.png", "nx.png",
    "py.png", "ny.png",
    "pz.png", "nz.png"
])
scene.background = cubeTexture

材质贴图

// 创建一个纹理
const texture = new THREE.TextureLoader().load("/star.jpg")
// 基础材质
const material = new THREE.MeshBasicMaterial({
    map: texture
})

环境贴图

//   创建一个立方体纹理,左右上下前后
const cubeTexture = new THREE.CubeTextureLoader().setPath('/textures/').load([
    "px.png", "nx.png",
    "py.png", "ny.png",
    "pz.png", "nz.png"
])
const material = new THREE.MeshBasicMaterial({
    envMap: cubeTexture
})

将物体变为线框材质

material.wireframe = true

BufferGeometry自定义几何体

1. 第一种方式

const geometry = new THREE.BufferGeometry()
const float32Array = new Float32Array([
  0,0,1,
  1,0,1,
  1,1,1,
  1,1,1,
  0,1,1,
  0,0,1
])
geometry.setAttribute("position",new THREE.BufferAttribute(float32Array,3))

预览：

2. 第二种方式

前面那种方式发现在绘制点的时候，会有一些重复的点，可以采用索引的方式进行绘制

const geometry = new THREE.BufferGeometry()
const float32Array = new Float32Array([
  0,0,1,
  1,0,1,
  1,1,1,
  // 1,1,1,
  0,1,1,
  // 0,0,1
])
geometry.setAttribute("position",new THREE.BufferAttribute(float32Array,3))
// 创建一个索引
const indexs = new Uint16Array([
  0,1,2,2,3,0
])
geometry.index = new THREE.BufferAttribute(indexs,1)

自定义uv坐标

如果你想要显示纹理图片的某一个部分，而不是全部显示，就可以考虑使用这个

// 定义uv像素的取值范围 左上 右上 左下 右下
const uv = new Float32Array([
  0.5,1,
  1,1,
  0.5,0,
  1,0
])

geometry.attributes.uv = new THREE.BufferAttribute(uv,2)

环境光源与点光源

预览：

1. 添加环境光源

// 颜色，光照强度
const light = new THREE.AmbientLight("#ecf0f1",1)
scene.add(light)

2. 添加点光源

const pointLight = new THREE.PointLight("#ffffff",100,100)
pointLight.position.set(5,5,5)
scene.add(pointLight)

3. 设置阴影效果

正方体的设置：

// 物体接受光源
mesh.receiveShadow = true
// 物体投射光源
mesh.castShadow = true

地面的设置：

meshfloor.receiveShadow = true

点光源的设置：

pointLight.castShadow = true

渲染器的设置：

renderer.shadowMap.enabled=true

4. 全部代码

<template>
  <div id="canvas"></div>
</template>

<script setup lang="js">
import * as THREE from 'three';
import { onMounted } from "vue"
// 引入轨道控制器
import { OrbitControls } from '@/assets/js/OrbitControls.js'

const width = document.documentElement.clientWidth
const height = document.documentElement.clientHeight

// 创建3d场景
const scene = new THREE.Scene()

// 创建3维坐标
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// 创建相机
const camera = new THREE.PerspectiveCamera(60, 2, 0.1, 500)
camera.position.z = 7
camera.position.y = 3

// 创建正方体
const geometry = new THREE.BoxGeometry(1,1,1)
// 创建地面
const geometryFloor = new THREE.PlaneGeometry(10,10)

// 添加灯光效果
// 环境光
const light = new THREE.AmbientLight("#ecf0f1",1)
scene.add(light)
// 点光源
const pointLight = new THREE.PointLight("#ffffff",100,100)
pointLight.position.set(5,5,5)
pointLight.castShadow = true
scene.add(pointLight)

// 基础材质
const material = new THREE.MeshPhongMaterial({
  color: "#54a0ff",
  // 灯光打到物体上的高亮程度，越高的值越闪亮
  shininess: 500
})
// 基础材质
const materialFloor = new THREE.MeshPhongMaterial({
  color: "#bdc3c7"
})

// 网格
const mesh = new THREE.Mesh(geometry, material)
const meshfloor = new THREE.Mesh(geometryFloor, materialFloor)
mesh.position.set(0, 0.5, 0)
// 物体接受光源
mesh.receiveShadow = true
// 物体投射光源
mesh.castShadow = true
meshfloor.rotation.x -= Math.PI / 2
meshfloor.receiveShadow = true
scene.add(mesh)
scene.add(meshfloor)

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
// 调整渲染器大小
renderer.setSize(width, height)
// 阴影投射
renderer.shadowMap.enabled=true

onMounted(() => {
  // 添加动画
  renderer.setAnimationLoop(animate)
  document.querySelector('#canvas').appendChild(renderer.domElement)
  // 添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);

  // 动画函数
  function animate(time) {

    // mesh.rotation.x = time / 2000;
    // mesh.rotation.y = time / 1000;
    controls.update()
    renderer.render(scene, camera);

  }
})

// 添加网格地面
// const gridHelper = new THREE.GridHelper(10, 10)
// scene.add(gridHelper)

// 进行渲染
renderer.render(scene, camera)



</script>

<style></style>

组

可以给一些物体进行统一的一个编组，方便对其进行统一的控制

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );

//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );

scene.add( group );

GLTF加载器（GLTFLoader）

glTF（gl传输格式）是一种开放格式的规范 （open format specification）， 用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供， 外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机

1. 导入

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

2. 使用

// 创建一个GTLF加载器
const loader = new GLTFLoader()
// 加载
loader.load("/xuefulan.glb", (gltf)=>{
    scene.add(gltf.scene)
})