three.js官方案例(animation / keyframes)webgl_animation_keyframes.html学习

2024-06-01 09:44

本文主要是介绍three.js官方案例(animation / keyframes)webgl_animation_keyframes.html学习,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

​编辑

1  PMREMenerator

1.1 构造函数

1.2  fromScene方法

2 AnimationMixer

3 animal1.html全部

4  animal1.js全部

1  PMREMenerator

        此类生成预过滤的 Mipmapped 辐射环境贴图 (PMREM) 来自 cubeMap 环境纹理。这允许不同的级别 的模糊,可根据材质粗糙度快速访问。不像 传统的MIPMAP链,它只下到LOD_MIN级别(上图), 然后在同一LOD_MIN创建额外甚至更多过滤的“MIP” 分辨率,与更高的粗糙度水平相关。通过这种方式,我们 保持分辨率以平滑地插值漫射照明,同时 限制抽样计算。

注: 最小 MeshStandardMaterial 的粗糙度取决于 提供的纹理的大小。如果您的渲染尺寸较小,或者 闪亮的部分有很多曲率,你也许仍然可以逃脱 具有较小的纹理尺寸

1.1 构造函数

PMREMGenerator( 渲染器 : WebGLRenderer )

此构造函数创建新的 PMREMGenerator

1.2  fromScene方法

.fromScene ( scene : Scene, sigma : Number, near : Number, far : Number ) : WebGLRenderTarget

scene - 给定的场景
sigma - (可选)指定在PMREM生成之前应用于场景的以弧度为单位的模糊半径。默认为0。
near - (可选)近平面值,默认值为0.1。
far - (可选)远平面值。默认值为100。

2 AnimationMixer

console.log(gltf);

打印加载的gltf,可以看到动画animations和要显示的模型scene是并列的:

  console.log( gltf.animations[ 0 ]);

animal1.html全部

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - animation - keyframes</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="../three.js-r163/examples/main.css"><style>body {background-color: #bfe3dd;color: #000;}a {color: #2983ff;}</style></head><body><div id="container"></div><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - keyframes<br/>Model: <a href="https://artstation.com/artwork/1AGwX" target="_blank" rel="noopener">Littlest Tokyo</a> by<a href="https://artstation.com/glenatron" target="_blank" rel="noopener">Glen Fox</a>, CC Attribution.</div><script type="importmap">{"imports": {"three": "../three.js-r163/build/three.module.js","three/addons/": "../three.js-r163/examples/jsm/"}}</script><script type="module" src="animal1.js"></script></body></html>

4  animal1.js全部

import * as THREE from 'three';//性能检测器import Stats from 'three/addons/libs/stats.module.js';//控制器import { OrbitControls } from 'three/addons/controls/OrbitControls.js';//室内环境import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';//gltf模型下载器import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';let mixer;const clock = new THREE.Clock();const container = document.getElementById( 'container' );//性能检测const stats = new Stats();container.appendChild( stats.dom );//3D渲染器const renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );//生成成预过滤的 Mipmapped 辐射环境贴图 const pmremGenerator = new THREE.PMREMGenerator( renderer );const scene = new THREE.Scene();scene.background = new THREE.Color( 0xbfe3dd );			scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ), 0.04 ).texture;//环境贴图 作用是照亮模型  这一行注掉模型是黑的
// 相机const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );camera.position.set( 5, 2, 8 );//控制器const controls = new OrbitControls( camera, renderer.domElement );controls.target.set( 0, 0.5, 0 );controls.update();controls.enablePan = false;//启用或禁用摄像机平移,默认为true//将其设置为true以启用阻尼(惯性),这将给控制器带来重量感。默认值为false。//请注意,如果该值被启用,你将必须在你的动画循环里调用.update()。controls.enableDamping = true;//一个用于加载经过Draco压缩的图形库const dracoLoader = new DRACOLoader();dracoLoader.setDecoderPath( '../three.js-r163/examples/jsm/libs/draco/gltf/' );//模型加载const loader = new GLTFLoader();//.setDRACOLoader ( dracoLoader : DRACOLoader ) : this
//dracoLoader — THREE.DRACOLoader的实例,用于解码使用KHR_draco_mesh_compression扩展压缩过的文件。loader.setDRACOLoader( dracoLoader );loader.load( '../three.js-r163/examples/models/gltf/LittlestTokyo.glb', function ( gltf ) {console.log(gltf);const model = gltf.scene;			model.position.set( 1, 1, 0 );//更改位置model.scale.set( 0.01, 0.01, 0.01 );//更改大小scene.add( model );mixer = new THREE.AnimationMixer( model );//获取动画混合区//.clipAction (clip : AnimationClip, optionalRoot : Object3D) : AnimationAction
//返回所传入的剪辑参数的AnimationAction, 根对象参数可选,默认值为混合器的默认根对象。第一个参数可以是动画剪辑(AnimationClip)对象或者动画剪辑的名称。
//如果不存在符合传入的剪辑和根对象这两个参数的动作, 该方法将会创建一个。传入相同的参数多次调用将会返回同一个剪辑实例。console.log( gltf.animations[ 0 ]);mixer.clipAction( gltf.animations[ 0 ] ).play();//播放动画animate();//}, (progress)=>{console.log(progress);}, function ( e ) {console.error( e );} );//自适应的功能window.onresize = function () {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );};function animate() {requestAnimationFrame( animate );const delta = clock.getDelta();//获取时间mixer.update( delta );//动画更新controls.update();//控制器更新stats.update();//性能检测更新renderer.render( scene, camera );}

这篇关于three.js官方案例(animation / keyframes)webgl_animation_keyframes.html学习的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1020657

相关文章

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典(dict)类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例:安全访问未知键三、案例:配置参数默认值简介python是一种高级编

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h