three.js学习笔记(十八)——调整材质

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量4.8k 收藏 4
点赞数 6
分类专栏： three.js学习笔记 文章标签： javascript three.js 着色器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43990650/article/details/125690121
版权

介绍

到现在为止，我们都在创建新的着色器材质，但是如果我们想要修改一个Three.js内置的材质呢？或许我们对MeshStandardMaterial的处理结果感到满意，但是希望往里边添加顶点动画。

如果重写整个MeshStandardMaterial，那么处理灯光、环境贴图、基于物理的渲染、所有类型的纹理等将花费太多时间。

相反，我们将从MeshStandardMaterial开始，并尝试将自己的代码集成到其着色器中。
有两种方法可以做到：

  1. 通过在编译着色器前触发Three.js钩子，可以让我们处理着色器并注入自己的代码。
  2. 重新创建一个全新材质，使用与Three.js写的代码相同的参数，然后再加上我们自己的参数。

我们会用第一个方法，将以一种有趣的方式扭曲模型顶点，但材质的所有基本特征仍在工作，如阴影、纹理、法线贴图等。

设置

我们将使用于three.js学习笔记(十三)——真实渲染一样的设置，只不过将模型替换为一个头部模型，它只有一个网格和真实纹理，可以与我们下边的扭曲动画相处得来。
在这里插入图片描述
在加载模型前已经创建好了带有贴图和法向贴图的标准网格材质MeshStandardMaterial，然后在模型的唯一网格上使用该材质，该网格最终被添加到场景中。

下边的代码大都跟材质相关。

材质钩子

我们有MeshStandardMaterial，但想修改它的着色器。

要想修改一种材质，必须先访问其原始着色器，为此我们可以使用材质的onBeforeCompile方法，为其指定一个函数，该函数会在编译着色器程序前执行回调，此函数使用shader源码作为参数，用于修改内置材质：

material.onBeforeCompile = (shader) =>
{
    console.log(shader)
    console.log(shader.uniforms)
    console.log(shader.vertexShader)
    console.log(shader.fragmentShader);
}

在这里插入图片描述
现在我们可以查看vertexShader ,fragmentShader和uniforms 了。

给顶点着色器添加代码

在这里插入图片描述
通过查看顶点着色器代码，每个#include ...都会插入Three.js依赖包里边特定文件夹中的代码，因此我们可以使用js来替换这部分。
进入到/node_modules/three/src/renders/shaders/文件夹中，这是我们能找到的大多数Three.js着色器代码的地方。
被include包裹住的部分称为块chunk，可以在ShaderChunk/文件夹中找到它们。
进入某个块js文件中，可以看到begin_vertex通过创建名为transformed的变量来处理位置。
在这里插入图片描述
接下来我们回到js中替换这部分代码：
在y轴上移动模型

material.onBeforeCompile = (shader) =>
{
    shader.vertexShader = shader.vertexShader.replace(
    '#include <begin_vertex>',
    `
        #include <begin_vertex>

        transformed.y += 3.0;
    `
	)
}

在这里插入图片描述
可以观察到确实在y轴方向上移动了，但是阴影出现了些问题，待会再修复，现在移除transformed.y += 3.0;

扭曲

我们将创建一个矩阵来对顶点进行扭曲。
(下边的代码都是位于要替换的glsl中)
首先，我们将尝试以相同的角度旋转所有顶点。然后根据顶点的高度偏移该角度，并为其设置动画。
创建具有任意值的角度变量：
（即便还没有移动顶点，依然可以刷新查看后台是否报错）

#include <begin_vertex>

float angle = 0.3;

在学着色器的时候知道，矩阵就像是一个管道，我们可以在这发送像向量vector这样的数据。管道将对该向量应用变换并输出结果。我们可以创建一个矩阵来缩放顶点，一个来旋转，另一个来移动，甚至可以组合起来，这些矩阵可以处理2D变换、3D变换等等。

在本例中，我们会做一个2D变换，只在x和z轴上旋转顶点进行扭曲，不会在y轴上进行旋转。
使用get2dRotateMatrix函数返回二维矩阵（mat2）:
通过The Book of Shaders了解更多

mat2 get2dRotateMatrix(float _angle)
{
    return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle));
}

我们该把这段代码放在glsl哪个位置？如果我们自己写着色器，则会将其放在main函数前，而在这里，main函数外边的有一个块是common，这个块的优点是它位于所有着色器中，替换它：

material.onBeforeCompile = (shader) =>
{
    // 替换common
    shader.vertexShader = shader.vertexShader.replace(
        '#include <common>',
        `
            #include <common>
            mat2 get2dRotateMatrix(float _angle)
            {
                return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle));
            }
        `
    )
    
    // 替换begin_vertex
    // ...
}

使用get2dRotateMatrix函数创建rotateMatrix矩阵变量，然后旋转该矩阵：

#include <begin_vertex>
    
float angle = 0.3;
mat2 rotateMatrix = get2dRotateMatrix(angle);
transformed.xz = rotateMatrix * transformed.xz;

在这里插入图片描述
根据顶点高度改变角度：

float angle = position.y * 0.9;

在这里插入图片描述

动画

在函数外部声明一个变量：

const customUniforms = {
  uTime: { value: 0 }
}

跟以往一样，将名为uTime的uniform发送到着色器：

material.onBeforeCompile = function(shader)
{
    shader.uniforms.uTime = customUniforms.uTime

    // ...
}

在common块中检索uTime

#include <common>

uniform float uTime;

mat2 get2dRotateMatrix(float _angle)
{
    return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle));
}

回到动画函数中更新uTime的值

const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update material
    customUniforms.uTime.value = elapsedTime

    // ...
}

在这里插入图片描述

修复阴影

正如阴影那节课所说的，在灯光渲染下，网格材质将被深度网格材质MeshDepthMaterial所替代，而我们并没有修改MeshDepthMaterial。
在后边加一个平面可以将看清楚阴影：
在这里插入图片描述
由于阴影使用的是深度网格材质，我们可以在网格上使用customDepthMaterial属性覆盖该材质以便让Three.js使用自定义材质。
首先，创建一个深度网格材质并设置其 depthPacking属性值为THREE.RGBADepthPacking

const depthMaterial = new THREE.MeshDepthMaterial({
    depthPacking: THREE.RGBADepthPacking
})

加载模型时要使用自定义的深度网格材质depthMaterial：

gltfLoader.load(
    '/models/LeePerrySmith/LeePerrySmith.glb',
    (gltf) =>
    {
        // ...

        mesh.material = material // Update the material
        mesh.customDepthMaterial = depthMaterial // Update the depth material

        // ...
    }
)

然后跟前面的材质同理：

depthMaterial.onBeforeCompile = (shader) =>
{
    shader.uniforms.uTime = customUniforms.uTime
    shader.vertexShader = shader.vertexShader.replace(
        '#include <common>',
        `
            #include <common>

            uniform float uTime;

            mat2 get2dRotateMatrix(float _angle)
            {
                return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle));
            }
        `
    )
    shader.vertexShader = shader.vertexShader.replace(
        '#include <begin_vertex>',
        `
            #include <begin_vertex>

            float angle = (position.y + uTime) * 0.9;
            mat2 rotateMatrix = get2dRotateMatrix(angle);

            transformed.xz = rotateMatrix * transformed.xz;
        `
    )
}

现在看平面上的阴影也可以看出在进行扭曲，但是模型上的阴影其实是错误的，看起来阴影在随着顶点旋转，这与法线相关。
在这里插入图片描述

修复法线

当我们旋转顶点时，我们只旋转了位置，但没有旋转法线，因此需要修改处理法线的块。
处理法线的块称为beginnormal_vertex。让我们将其替换为material，记住不是depthMaterial，因为这阴影材质不需要法线：

material.onBeforeCompile = (shader) =>
{
    // ...

    shader.vertexShader = shader.vertexShader.replace(
        '#include <beginnormal_vertex>',
        `
            #include <beginnormal_vertex>
        `
    )

    // ...
}

如果你去查看
/node_modules/three/src/renderers/shaders/ShaderChunks/beginnormal_vertex.glsl.js，会看到法线变量名为objectNormal，因此我们会对其进行扭曲旋转的相同操作：
(记得移除begin_vertex中的angle和rotateMatrix以避免重复声明)

material.onBeforeCompile = function(shader)
{
    // ...

    shader.vertexShader = shader.vertexShader.replace(
        '#include <beginnormal_vertex>',
        `
            #include <beginnormal_vertex>

            float angle = (position.y + uTime) * 0.9;
            mat2 rotateMatrix = get2dRotateMatrix(angle);

            objectNormal.xz = objectNormal.xz * rotateMatrix;
        `
    )
    shader.vertexShader = shader.vertexShader.replace(
        '#include <begin_vertex>',
        `
            #include <begin_vertex>

            transformed.xz = rotateMatrix * transformed.xz;
        `
    )
}

在这里插入图片描述

源代码

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import * as dat from 'dat.gui'

/**
 * Base
 */
// Debug
const gui = new dat.GUI()

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Loaders
 */
const textureLoader = new THREE.TextureLoader()
const gltfLoader = new GLTFLoader()
const cubeTextureLoader = new THREE.CubeTextureLoader()

/**
 * Update all materials
 */
const updateAllMaterials = () => {
  scene.traverse((child) => {
    if (
      child instanceof THREE.Mesh &&
      child.material instanceof THREE.MeshStandardMaterial
    ) {
      child.material.envMapIntensity = 5
      child.material.needsUpdate = true
      child.castShadow = true
      child.receiveShadow = true
    }
  })
}

/**
 * Environment map
 */
const environmentMap = cubeTextureLoader.load([
  '/textures/environmentMaps/0/px.jpg',
  '/textures/environmentMaps/0/nx.jpg',
  '/textures/environmentMaps/0/py.jpg',
  '/textures/environmentMaps/0/ny.jpg',
  '/textures/environmentMaps/0/pz.jpg',
  '/textures/environmentMaps/0/nz.jpg'
])
environmentMap.encoding = THREE.sRGBEncoding

scene.background = environmentMap
scene.environment = environmentMap

/**
 * Material
 */

// Textures
const mapTexture = textureLoader.load('/models/LeePerrySmith/color.jpg')
mapTexture.encoding = THREE.sRGBEncoding

const normalTexture = textureLoader.load('/models/LeePerrySmith/normal.jpg')
const customUniforms = {
  uTime: { value: 0 }
}
// Material
const depthMaterial = new THREE.MeshDepthMaterial({
  depthPacking: THREE.RGBADepthPacking
})
const material = new THREE.MeshStandardMaterial({
  map: mapTexture,
  normalMap: normalTexture
})
material.onBeforeCompile = (shader) => {
  shader.uniforms.uTime = customUniforms.uTime
  shader.vertexShader = shader.vertexShader.replace(
    '#include <common>',
    `
            #include <common>
            uniform float uTime;
            mat2 get2dRotateMatrix(float _angle)
            {
                return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle));
            }
        `
  )
  shader.vertexShader = shader.vertexShader.replace(
    '#include <beginnormal_vertex>',
    `
            #include <beginnormal_vertex>
            
            float angle = (position.y + uTime) * 0.9;
            mat2 rotateMatrix = get2dRotateMatrix(angle);

            objectNormal.xz = objectNormal.xz * rotateMatrix;
        `
  )
  shader.vertexShader = shader.vertexShader.replace(
    '#include <begin_vertex>',
    `
            #include <begin_vertex>

            transformed.xz = rotateMatrix * transformed.xz;
        `
  )
}

depthMaterial.onBeforeCompile = (shader) => {
  shader.uniforms.uTime = customUniforms.uTime
  shader.vertexShader = shader.vertexShader.replace(
    '#include <common>',
    `
            #include <common>

            uniform float uTime;

            mat2 get2dRotateMatrix(float _angle)
            {
                return mat2(cos(_angle), - sin(_angle), sin(_angle), cos(_angle));
            }
        `
  )
  
  shader.vertexShader = shader.vertexShader.replace(
    '#include <begin_vertex>',
    `
            #include <begin_vertex>

            float angle = (position.y + uTime) * 0.9;
            mat2 rotateMatrix = get2dRotateMatrix(angle);

            transformed.xz = rotateMatrix * transformed.xz;
        `
  )
}

/**
 * Models
 */
gltfLoader.load('/models/LeePerrySmith/LeePerrySmith.glb', (gltf) => {
  // Model
  const mesh = gltf.scene.children[0]
  mesh.rotation.y = Math.PI * 0.5
  mesh.material = material // Update the material
  mesh.customDepthMaterial = depthMaterial // Update the depth material
  scene.add(mesh)

  // Update materials
  updateAllMaterials()
})

/**
 * Plane
 */
const plane = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(15, 15, 15),
  new THREE.MeshStandardMaterial()
)
plane.rotation.y = Math.PI
plane.position.y = -5
plane.position.z = 5
scene.add(plane)

/**
 * Lights
 */
const directionalLight = new THREE.DirectionalLight('#ffffff', 3)
directionalLight.castShadow = true
directionalLight.shadow.mapSize.set(1024, 1024)
directionalLight.shadow.camera.far = 15
directionalLight.shadow.normalBias = 0.05
directionalLight.position.set(0.25, 2, -2.25)
scene.add(directionalLight)

/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

window.addEventListener('resize', () => {
  // Update sizes
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  // Update camera
  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix()

  // Update renderer
  renderer.setSize(sizes.width, sizes.height)
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
)
camera.position.set(4, 1, -4)
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true
})
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFShadowMap
renderer.physicallyCorrectLights = true
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 1
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () => {
  const elapsedTime = clock.getElapsedTime()
  // Update material
  customUniforms.uTime.value = elapsedTime
  // Update controls
  controls.update()

  // Render
  renderer.render(scene, camera)

  // Call tick again on the next frame
  window.requestAnimationFrame(tick)
}

tick()
hongsir_12
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
WebGL学习教程之Three.js学习笔记(第一篇)
10-17
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
Three.js-webgl物联网粮仓3D可视化
03-12
本项目名为"Three.js-webgl物联网粮仓3D可视化"，是基于...通过学习和研究这个项目，开发者不仅可以掌握Three.js和Vue.js的实践应用，还能深入了解物联网在实际场景中的应用，为今后的3D可视化项目开发积累宝贵经验。
threejs 源模型克隆之后修改克隆模型材质会影响源模型
qq_46468347的博客
12-01 287
在Three.js中，当你克隆一个模型时，实际上只是创建了一个新的对象，但该对象仍然引用原始模型的一些属性，例如材质。这意味着如果你修改了克隆模型的材质，原始模型的材质也会受到影响。当你克隆一个模型时，新的模型实际上与原始模型共享相同的材质对象。方法创建材质的副本，然后将其赋值给克隆模型的材质属性。这样，你就可以对克隆模型的材质进行独立的修改，而不会影响原始模型。如果你想要修改克隆模型的材质而不影响原始模型，你需要创建一个新的材质对象并将其赋值给克隆模型的材质属性。直接将源对象的材质克隆。
three.js 中ShaderChunk的, common.glsl 介绍
webMinStudent的博客
05-04 252
但是three.js他也通过了一些 shader 代码片段，哎我们可以通过引入这些 shader代码片段，在自己的 THREE.ShaderMaterial中哈哈哈。在three.js中，我们可以编写底层的shader代码，是通过 THREE.ShaderMaterial 来进行的。从这可以看出来，是什么，他声明了 PI, PI2, PI_HALF, RECIPROCAL_PI,…现在我们讲一下，这个common.glsl 文件是干嘛的。这个变量的含义就是，圆周率，2Π，1/2 Π …
three.js学习笔记(三)——material材质
hongsir的博客
11-29 5762
什么是材质Material 材质用于在几何体的每个可见像素上添加颜色 创建材质 初始化基础网格材质MeshBasicMaterial const material = new THREE.MeshBasicMaterial() 接下来我们往场景中添加三个网格物体 //球形缓冲几何体 const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(0.5,16,16),material) //平面缓冲几何体 const plane = new THR
three.js学习笔记(六)——创建简单鬼屋
hongsir的博客
12-05 1553
初始场景 一个平面，一个球体用来测试环境光和月光，测得光源正常后移除球体 创建房屋组别 因为我们房屋可能包含许多东西像是门、屋顶之类的，所以需要创建一个房屋组，将所有属于屋子的物体给添加到这个组里面，之后当我们需要移动整个屋子时，变可以把房屋组当作一个整体去进行位置移动，而不用单个单个的去移动物体位置。 // 创建一个house组 const house = new THREE.Group() scene.add(house) 下面先初始化房屋该有的物体，具体细节后面再设置 创建墙体 //墙体 cons
three.js学习笔记(七)——粒子
hongsir的博客
12-06 2927
粒子可以被用来创建星星、烟雾、雨滴、灰尘、火焰等等。我们可以使用合理的帧速率来创建数千个粒子。每个粒子都是由始终面向摄影机的平面（俩个三角形）组成的。 创建粒子 创建粒子和创建网格很像，不同的是粒子使用的材质是点材质PointsMaterial和点实例Points。 下面代码为例，当实例化球缓冲几何体时，该几何体的每个顶点都将成为粒子。 /** * 粒子 */ const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32) const
three.js学习笔记(五)——Shadows阴影
hongsir的博客
12-03 3440
阴影一直是实时三维渲染的挑战，开发人员必须在合理的情况下找到显示真实阴影的技巧。 Three.js 有一个内置的解决方案，虽然其并不完美，但用起来很方便。 阴影是怎么工作的？ 当你进行一次渲染时，Three.js将对每个支持阴影的光线进行渲染，那些渲染会像摄像机那样模拟光线所看到的内容，而在这些灯光渲染下，网格材质将被深度网格材质MeshDepthMaterial所替代。 灯光渲染将像纹理一样被存储起来，称为阴影贴图，之后它们会被用于每个支持接收阴影的材质并投射到几何体上。 ...
three.js学习笔记(二)——textures纹理
hongsir的博客
11-28 3463
什么是纹理Texture 简单来说，纹理就是覆盖几何体表面的图像。不同的纹理类型具有不同的效果。 纹理加载器TextureLoader // 初始化一个纹理加载器，然后用.load()加载纹理贴图 const textureLoader = new THREE.TextureLoader() const colorTexture = textureLoader.load('/textures/door/color.jpg') // 之后使用纹理来创建材质 const material = new THREE
three.js学习笔记(十六)——汹涌的海洋
hongsir的博客
05-25 2440
介绍 现在我们知道了如何使用着色器并绘制一些图案，那么这次就要用它来创建一个汹涌的海洋。 我们将使用调试面板来设置波浪的动画并保持对各项参数的控制。 初始场景 现在，我们只有一个使用MeshBasicMaterial的平面，该几何体具有128x128的细分。我们将为顶点设置动画以获得波浪效果，为此我们需要非常多顶点。128x128可能不够多，但如果需要，我们将增加该值。 基础 现在将材质替换为着色器材质ShaderMaterial const waterMaterial = new THREE.Shade
three.js学习笔记(九)——光线投射
hongsir的博客
12-08 1711
光线投射(RayCaster)可以向特定方向投射光线，并测试哪些对象与其相交。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。 用法示例： 测试相机前方是否有一堵墙（障碍） 光线是否击中目标 当鼠标移动时测试是否有物体位于光标下方，以此模拟鼠标事件 当物体朝向特定某处时提示信息 初始场景 三个球体，然后我们要发射一条光线穿过这些球体看其是否与之相交 const object1 = new THREE.Mesh( new THREE.SphereBufferGeometry(0
three.js学习笔记(十)——物理引擎
hongsir的博客
12-13 6215
我们可以利用数学函数和一些解决方案来实现自己的物理效果，但是如果需求更加真实的物理效果，像是物体张力、摩擦力、拉伸、反弹等真实物理效果，最好使用外部库 原理 我们会创建一个Three.js世界和一个Physics物理世界，虽然我们看不见后者但它是真实存在的，每当我们往Three.js世界添加对象时，相应的物理世界也会添加相同对象。物理世界在每一帧更新时都会相应更新到Three.js世界中。 例如物理世界中的球体在地板上进行真实弹跳效果时，我们会取其每一帧更新后的坐标并将坐标应用到Three.js世界中的对应
three.js 可视化大屏 3D场馆模型Demo
02-26
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
Three.js学习之Lamber材质和Phong材质
10-21
本篇将介绍基本材质以及两种基于光照模型的材质（Lamber与Phong），有需要的小伙伴们可以参考学习。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 330
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1111
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 124
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 160
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
WebGL three.js学习笔记 阴影与实现物体的动画
05-30
好的，我会为您解答关于WebGL three.js的阴影与实现物体动画的问题。首先，让我们来了解一下WebGL three.js是什么。 WebGL three.js是一款基于WebGL的JavaScript 3D库，可以帮助我们快速搭建3D场景和应用。接下来我们来讲解阴影和实现物体动画的方法。 一、阴影 阴影是模拟物体之间的阴影效果，让3D场景更加真实。在three.js中，我们可以通过设置Mesh的castShadow和receiveShadow属性来实现阴影效果。 1. 首先，我们需要在场景中添加光源，例如SpotLight或DirectionalLight。 2. 然后，在需要投射阴影的物体上设置castShadow为true。 3. 最后，在需要接收阴影的物体上设置receiveShadow为true。 代码示例： ```javascript // 添加光源 const light = new THREE.SpotLight(0xffffff); light.position.set(0, 100, 0); light.castShadow = true; scene.add(light); // 添加需要投射阴影的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.castShadow = true; scene.add(cube); // 添加需要接收阴影的物体 const plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffffff })); plane.receiveShadow = true; plane.rotation.x = -Math.PI / 2; scene.add(plane); ``` 二、物体动画 在three.js中，我们可以通过Tween.js库来实现物体的动画效果。Tween.js是一款JavaScript动画库，可以帮助我们实现非常丰富的动画效果。 1. 首先，我们需要在HTML文件中引入Tween.js库文件。 2. 然后，在需要动画的物体上设置初始状态。 3. 最后，通过Tween.js库来设置物体的目标状态和动画效果，例如缓动动画（ease）或弹跳动画（bounce）。 代码示例： ```javascript // 引入Tween.js库文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script> // 添加需要动画的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.position.set(0, 0, 0); scene.add(cube); // 设置初始状态 const start = { x: 0, y: 0, z: 0 }; // 设置目标状态 const end = { x: 50, y: 50, z: 50 }; // 设置动画效果 const tween = new TWEEN.Tween(start) .to(end, 1000) .easing(TWEEN.Easing.Quadratic.InOut) .onUpdate(() => { cube.position.set(start.x, start.y, start.z); }) .start(); ``` 以上是关于WebGL three.js阴影与实现物体动画的方法，希望能够对您有所帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值