12 2019 档案
摘要：动画原理 动画的本质实际上就是快速地不断变化的图片，每张图片对比前后两张图片有细微的变化。整个连续的过程达到一定速度在我们人眼看来就是动画。人眼一般能区分的帧率是24帧。过低给人的感觉就会很不流畅。 和我们小时候看的动画书原理一样 js中动画实现原理 在js中，要实现动画，我们首先需要做的第一件事情
阅读全文
摘要：在Three.js中设置阴影效果，有多个地方需要设置属性。 1.渲染器 2.地板 3.光源 4.物体
阅读全文
摘要：在学习2D文字的时候，看到官网有这样一个示例： https://threejs.org/examples/ css2d_label 月球的运动轨迹，在刷新函数中是这样写的： 其中 月球的运动轨迹就是通过修改月球在三维坐标系中的x和z值来实现的。 也就是这行关键代码： x轴坐标： y轴坐标： 其中el
阅读全文
摘要：有时候Ctrl+s保存，html代码格式会紊乱。 造成这个原因一般是我们基本都在用的一个插件： 解决办法 【方法一】：不用普通保存，用save without format 代码编辑页面 按F1 输入 回车 该操作可以用快捷键 【方法二】：关闭自动格式化 代码编辑页面 按F1 输入 回车 属性设置为
阅读全文
摘要：在我们开发过程中，我们也在不断的学习，以及优化自己的代码质量。 我们时常需要一个计时器，来对代码某段或者某些段执行进行计时，以评估代码运行质量，考虑是否优化。 以及优化后的直观对比。 JavaScript中， 已经向我们提供了方便的计时方法。 为了计算特定操作的时耗， 对象中引入了对计时器的支持。
阅读全文
摘要：Step1 github页面：创建一个仓库(如何创建github仓库,你可能需要参考这篇 "教程" )，库名（Repository name）为你打算放在github上的项目名称。例如： Step2 本地：在任意位置(如桌面)，打开 ，运行命令： 然后你会在你的本地，运行git bash的路径下，看
阅读全文
摘要：在看别人的代码的时候，遇到了一种写法，之前没有见过，如下： 通过群知道这个东西叫做自执行函数，通过网络了解，记录下这是个啥。 其实,这个很简单，但是为了描述的清楚，我们还是从基本出发，说的详细一点： JS中的函数基本的定义和触发的形式是这样的： case1 我们还可以给这个函数赋值给一个变量，然后通
阅读全文
摘要：递归是所有编程语言中，都会讨论到的一个问题。 Content Of Table "递归的通俗认识" "编程领域的抽象" "一个最简单的示例" "一点总结" "栈溢出问题" "本示例的一点拓展说明" 递归的通俗认识 编程是现实的抽象，这是能被应用到所有的编程概念的。 递归也是如此，其实递归，就是重复，
阅读全文
摘要：所有的编程语言，都会讨论值传递问题。 通过一个js示例直观认识 以上示例，可见，在pass by value 中，我们先定义了一个a变量初始值为1，然后定义了一个b变量，是直接把a赋值给了b，此时a，b值都是1，修改a值为2后，打印发现b值并没有被修改。这说明了一个问题：定义b变量时，var b =
阅读全文
摘要：markdown中，图片文字居中的方式有多种 1. 借助html标签``的支持 示例 注意 在博客园中，你必须把 `空一行，否则无法生效！（其他的网站和编辑器一般没有这个问题）例如： 2. 借助html标签 align`属性的支持 示例
阅读全文
摘要：概述 方法告诉浏览器你希望执行动画，并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画。该方法把一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。 注意：如果你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用Window.requestAnimationFr
阅读全文
摘要：Table Of Content "什么是懒加载？" "语法参数及使用方式?" "有哪些特点？" "与js有关的实践" 什么是懒加载？ 技术背景 Web应用需要经常向后台服务器请求资源（通过查询数据库，是非常耗时耗资源的），但是请求量过大，会导致服务端负载过大，响应慢，就容易造成前端的应用以及页面卡
阅读全文
摘要：简单的Demo演练 "点击跳转至Code Pen" 以查看演示和源码 完整代码 代码说明 设定x,y 初始值： 指针锁定方法（这里考虑了firefox浏览器兼容）： 现在，我们给 设定一个点击事件来监听触发 ，当点击时，将启动指针锁定。： 对于专用指针锁定事件侦听器： 。我们运行一个名为 的函数来处
阅读全文
摘要：Pointer Lock API 提供了三个属性、两个方法、两个事件 Tabel Of Content "属性" Document.pointerLockElement Document.onpointerlockchange Document.onpointerlockerror "方法" Ele
阅读全文
摘要：写在前面 markdown本身支持 Table Content 文中有等级标题后，仅需要在文中插入： 即可开启，本文重在介绍在手动写入锚链接时的注意事项。 例如 希望实现跳转至文章末尾的 附录链接 本身操作频率不高。 ==本文在这里可以更友好的阅读:Link== 当文章有分类，需要快速阅读，通常会先
阅读全文
摘要：前言 指针锁定（Pointer Lock），以前也叫鼠标锁定，提供了基于 的输入方法，不仅仅是视窗区域鼠标的绝对位置。指针锁定让你能够访问原始的鼠标移动，将鼠标事件的目标锁定为单个元素，消除了单个方向上鼠标能够移动的最远距离限制，并且，可以把鼠标从视图中去除（隐藏效果）。 这对于Web的第一人称之类
阅读全文
摘要：001_Three.js中的跨域问题 【情景描述】： 在初始化模型，引入字体和纹理皮肤图片的时候，由于跨域问题，出现了以下提示： Access to image at 'file:///F:/Users/Desktop/ThreeJS/LearnThreeJS/jay.jpg' from origi
阅读全文
摘要：此文仅作备份之用，为了更好的阅读体验，建议访问原文链接：《Three.js - 走进3D的奇妙世界。》 ，感谢原作者的好文。
阅读全文
摘要：3.1.2 正式代码结构 & ORBIT CONTROLS插件（轨道控制） 1. 说明 本节内容属于插入节，《Three.js入门指南》这本书中，只是简单的介绍了一些概念，是一本基础的入门级别的书。 在实践过程中，在学习过程中，我发现不论是官方，还是大牛的文章，都不是这样去结构话代码的。混乱，不易于
阅读全文
摘要：3.1 基本几何形状 圆环结（TorusKnotGeometry） 构造函数 THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale) 圆环节和圆环很相似，只是多了一些参数。 r
阅读全文
摘要：3.1 基本几何形状 圆环面（TorusGeometry） 构造函数 THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc) radius：圆环半径； tube：管道半径； radialSegments与tubu
阅读全文
摘要：3.1 基本几何形状 多面体 构造函数 正四面体（TetrahedronGeometry）、正八面体（OctahedronGeometry）、正二十面体（IcosahedronGeometry）的构造函数较为类似，分别为： 正四面体（TetrahedronGeometry）： THREE.Tetra
阅读全文
摘要：3.1 基本几何形状 圆柱体（CylinderGeometry） 构造函数： 1 THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded) radiusTop：
阅读全文
摘要：3.1 基本几何形状 圆形（CircleGeometry） 说明： 可以创建圆形或者扇形 构造函数： THREE.CircleGeometry(radius, segments, thetaStart, thetaLength) radius：半径； segments：以一个点为中心的切片数（切蛋糕
阅读全文
摘要：3.1 基本几何形状 球体（SphereGeometry） 构造函数： THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength) radius：是
阅读全文
摘要：3.1 基本几何形状 平面（PlaneGeometry） 说明： 这里的平面（PlaneGeometry）其实是一个长方形，而不是数学意义上无限大小的平面。 构造函数： THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
阅读全文
摘要：3.1 基本几何形状 立方体（CubeGeometry） 构造函数： THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments) width：是x方向上的长度； height：是y方向上
阅读全文
摘要：3.0 代码构建的最基本结构 说明： 我们必需首先知道，Three.js 的一些入门级概念： 我们需要知道，OpenGL 是一套三维实现的标准，为什么说是标准，因为它是跨平台，跨语言的。甚至CAD以及市面上众多的制图软件的底层，用的也是这一套标准。 而在JS中，这套标准的实现方式是基于OpenGL
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <m
阅读全文
摘要：2.1 什么是照相机 我们使用Three.js创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。 而针对投影方式的不同，照相机又分为正交投
阅读全文
摘要：【部分中英文对照】 Cameras（照相机，控制投影方式） Camera OrthographicCamera 正交相机 PerspectiveCamera 透视相机 Core（核心对象） BufferGeometry 缓冲几何 Clock（用来记录时间） EventDispatcher 事件调度
阅读全文
摘要：原文链接：https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/ 源代码下载链接：https://files.cnblogs.com/files/jaycethanks/TheAvia
阅读全文
摘要：本笔记，摘自：《Three.js 入门指南》一书 地址链接为：https://www.ituring.com.cn/book/miniarticle/58552 本书的前言摘录： 本书结构 本书针对Three.js的几个重要话题分章节介绍。 第1章介绍Three.js和WebGL的背景资料，并通过简
阅读全文
浙公网安备 33010602011771号