Verge3D
  • 欢迎访问Verge3D中文用户手册
  • 入门指引(Getting Started)
    • 初学指南
    • 工作流程
    • 拼图工具
    • 功能特性
    • 项目结构
    • 更新版本
    • 常见问题
      • 3D文件格式
      • SolidWorks
      • Revit
    • 实用链接
  • 一般主题(General Topics)
    • 资产压缩
    • 基于HTML的用户界面
    • Facebook发布3D主题
    • AR 和VR的开发
    • Wordpress插件
    • 使用JavaScript
    • 移动浏览器测试
  • 3ds Max 艺术家指南(3ds Max Artist's Guide)
    • 3ds Max安装Verge3D​
    • 材质系统
    • 阴影
    • 物理材质
    • 透明度
    • 视口和渲染预览
  • Blender 艺术家指南(Blender Artist's Guide)
    • Blender安装Verge3D
    • 材质系统概述
    • 阴影
    • 物理材质
    • 透明度
    • 使用材质库
    • 视口预览
  • 拼图参考
    • Initialization(初始化)
    • Events(事件)
    • Selectors(选择器)
    • Objects
    • Materials
    • Animation
    • Camera
    • Scenes
    • Misc
    • Time
    • HTML
    • AR/VR
    • Sound
    • Physics
    • Post-processing
    • Dictionaries
    • Variables
    • Procedures
    • System
    • Library
  • 程序员指南(Programmer's Guide)
    • 编程基础
    • 矩阵变换
    • 动画系统
    • 创建文本
    • 绘制线条
    • 更新事物
    • 约定
    • 获取资源
  • 开发者参考(Developer Reference)
    • Animation
      • AnimationAction
      • AnimationClip
      • AnimationMixer
      • AnimationObjectGroup
      • AnimationUtils
      • KeyframeTrack
      • PropertyBinding
      • PropertyMixer
    • Animation / Tracks
      • BooleanKeyframeTrack
      • ColorKeyframeTrack
      • NumberKeyframeTrack
      • QuaternionKeyframeTrack
      • StringKeyframeTrack
      • VectorKeyframeTrack
    • Application
      • App
      • AppPuzzles
      • AppUtils
    • Audio
      • Audio
      • AudioAnalyser
      • AudioContext
      • AudioListener
      • PositionalAudio
    • Cameras
      • ArrayCamera
      • Camera
      • CubeCamera
      • OrthographicCamera
      • PerspectiveCamera
      • StereoCamera
    • Constants
      • Animation
      • Core
      • CustomBlendingEquation
      • DrawModes
      • DrawModes
      • Materials
      • Renderer
      • Textures
    • Constraints
      • ChildOfConstraint
      • Constraint
      • CopyLocationConstraint
      • CopyRotationConstraint
      • CopyScaleConstraint
      • FloorConstraint
      • LimitLocationConstraint
      • LimitRotationConstraint
      • LimitScaleConstraint
      • LockedTrackConstraint
      • TargetConstraint
      • TrackToConstraint
    • 开发者参考
      • Controls
      • Core
      • Core / BufferAttributes
      • Deprecated
      • Extras
      • Extras / Core
      • Extras / Curves
      • Extras / Objects
      • Geometries
      • Helpers
      • Lights
      • Lights / Shadows
      • Loaders
      • Loaders / Managers
      • Materials
      • Math
      • Math / Interpolants
      • Objects
        • Annotation
        • AnnotationControl
        • Bone
        • Group
        • Line
        • LineLoop
        • LineSegments
        • LOD
        • Mesh Points
        • Skeleton
        • SkinnedMesh
        • Sprite
      • Renderers
        • RenderUtils
        • WebGLRenderer
        • WebGLRenderTarget
        • WebGLRenderTargetCube
      • Renderers / Shaders
        • ShaderChunk
        • ShaderLib
        • UniformsLib
        • UniformsUtils
      • Scenes
        • Fog
        • FogExp2
        • Scene
        • SceneBackground
      • Textures
        • CanvasTexture
        • CompressedTexture
        • CubeTexture
        • DataTexture
        • DataTexture3D
        • DepthTexture
        • Texture
        • VideoTexture
  • EXAMPLES
    • 案例
  • MISC
    • 杂项
Powered by GitBook
On this page
  • 如何用代码更新事物
  • 几何形状
  • 物料
  • 纹理
  • 相机
  1. 程序员指南(Programmer's Guide)

更新事物

How to Update Things 待校订

Previous绘制线条Next约定

Last updated 6 years ago

如何用代码更新事物

默认情况下,所有对象都会自动更新它们的矩阵(如果它们已添加到场景中)var object = new v3d.Object3D(); scene.add(object);或者如果它们是已添加到场景中的另一个对象的子节点:var object1 = new v3d.Object3D(); var object2 = new v3d.Object3D(); object1.add(object2); scene.add(object1); //object1 and object2 will automatically update their matrices

但是,如果您知道对象将是静态的,则可以禁用此选项并在需要时手动更新转换矩阵。object.matrixAutoUpdate = false; object.updateMatrix();

几何形状

BufferGeometry

BufferGeometries存储信息(如顶点位置,面指数,法线,色彩,UV的,并且任何自定义属性)在缓冲液 -即, 。这使得它们通常比标准几何图形更快,但代价是更难以使用。

关于更新BufferGeometries,最重要的是要理解你无法调整缓冲区的大小(这非常昂贵,基本上相当于创建一个新的几何体)。但是,您可以更新缓冲区的内容。

这意味着如果您知道BufferGeometry的属性将增长(例如顶点数),则必须预先分配足够大的缓冲区以容纳可能创建的任何新顶点。当然,这也意味着BufferGeometry将有一个最大大小 - 没有办法创建一个可以无限期有效扩展的BufferGeometry。

我们将使用在渲染时扩展的行的示例。我们将在缓冲区中为500个顶点分配空间,但最初只使用BufferGeometry.drawRange绘制两个顶点。var MAX_POINTS = 500; // geometry var geometry = new v3d.BufferGeometry(); // attributes var positions = new Float32Array(MAX_POINTS * 3); // 3 vertices per point geometry.addAttribute('position', new v3d.BufferAttribute(positions, 3)); // draw range var drawCount = 2; // draw the first 2 points, only geometry.setDrawRange(0, drawCount); // material var material = new v3d.LineBasicMaterial({ color: 0xff0000, linewidth: 2 }); // line var line = new v3d.Line(geometry, material); scene.add(line);

接下来,我们将使用以下模式随机向线条添加点:var positions = line.geometry.attributes.position.array; var x, y, z, index; x = y = z = index = 0; for (var i = 0, l = MAX_POINTS; i < l; i++) { positions[index ++] = x; positions[index ++] = y; positions[index ++] = z; x += (Math.random() - 0.5) * 30; y += (Math.random() - 0.5) * 30; z += (Math.random() - 0.5) * 30; }

如果要更改第一次渲染后渲染的点数,请执行以下操作:line.geometry.setDrawRange(0, newValue);

如果要在第一次渲染后更改位置数据值,则需要设置needsUpdate标志,如下所示:line.geometry.attributes.position.needsUpdate = true; // required after the first render

如果在初始渲染后更改位置数据值,则可能需要调用`.computeBoundingSphere()`以重新计算几何的边界球。line.geometry.computeBoundingSphere();

显示一个动画线,你可以适应你的用例。

例子:

几何

以下标志控制各种几何属性的更新。仅为需要更新的属性设置标志,更新成本很高。缓冲区更改后,这些标志会自动重置为false。如果要继续更新缓冲区,则需要将它们设置为true。请注意,这仅适用于Geometry 而不适用于BufferGeometry。var geometry = new v3d.Geometry(); geometry.verticesNeedUpdate = true; geometry.elementsNeedUpdate = true; geometry.morphTargetsNeedUpdate = true; geometry.uvsNeedUpdate = true; geometry.normalsNeedUpdate = true; geometry.colorsNeedUpdate = true; geometry.tangentsNeedUpdate = true;

例子:

物料

所有制服值都可以自由更改(例如颜色,纹理,不透明度等),每帧都会将值发送到着色器。

此外,GLstate相关参数可以随时更改(depthTest,blend,polygonOffset等)。

平滑/平滑的阴影被烘焙成法线。您需要重置法线缓冲区(见上文)。

在运行时无法轻松更改以下属性(一旦材质至少呈现一次):

  • 制服的数量和类型

  • 数字和灯的类型

  • 存在与否

    • 质地

    • 多雾路段

    • 顶点颜色

    • 剥皮

    • 变形

    • 阴影贴图

    • 阿尔法测试

这些变化需要构建新的着色器程序。你需要设置material.needsUpdate = true

请记住,这可能会非常缓慢并导致帧率的急动(特别是在Windows上,因为着色器编译在DirectX中比OpenGL慢)。

为了获得更流畅的体验,您可以通过“虚拟”值(如零强度灯,白色纹理或零密度雾)在一定程度上模拟这些功能的变化。

您可以自由更改用于几何块的材质,但是无法更改对象如何划分为块(根据面材)。

如果您需要在运行时使用不同的材料配置:

如果材料/块的数量很少,您可以事先预先划分物体(例如,人的头发/脸部/身体/上衣/裤子,前部/侧面/顶部/玻璃/轮胎/内部用于汽车)。

如果数量很大(例如,每个面可能有所不同),请考虑使用不同的解决方案,例如使用属性/纹理来驱动不同的每个面部外观。

例子:

纹理

如果更改了图像,画布,视频和数据纹理,则需要设置以下标志:texture.needsUpdate = true;

渲染目标会自动更新。

例子:

相机

相机的位置和目标会自动更新。如果你需要改变

  • FOV

  • 方面

  • 近

  • 远

那么你需要重新计算投影矩阵:camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix();

在网格之前的版本中,还需要启用动态标志(以保持内部类型化数组)://removed after r66 geometry.dynamic = true;

类型化数组
这是一个小提琴,
WebGL / custom / attributes
WebGL / buffergeometry / custom / attributes / particles
r66
WebGL /几何/动态
WebGL /材料/汽车
WebGL / webgl_postprocessing / dof
WebGL /材料/视频
WebGL / rtt