Three.js基础探寻八——法向材质与材质的纹理贴图九

2024-11-03

Three.js基础探寻十——动画

本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理对于Three.js程序而言,动画的实现是通过在每秒中多次重绘画面实现的. 为了衡量画面切换速度,引入了每秒帧数FPS(Frames Per Second)的概念,是指每秒画面重绘的次数.FPS越大,则动画效果越平滑,当FPS小于20时,一般就能明显感受到画面的卡滞现象. 那么FPS是不是越大越好呢?其实也未必

Three.js基础探寻八——法向材质与材质的纹理贴图

4.法向材质法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的颜色与照相机与该物体的角度相关,下面我们只改变照相机位置,观察两个角度的颜色变化: camera.position.set(5, 25, 25);的效果: camera.position.set(25, 25, 25);的效果: 我们观察的是同样的三个面,但是由于观察的角度不同,物体的颜色就不同了.

Three.js基础探寻一

1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SVG标签的渲染器. 这是一个开源项目. 3.环境找一个喜欢的jsIDE.调试建议使用Chrome或者Firefox. 4.下载传送门 5.使用 <head> <script type="text/javascript" src="js/three.js&quo

Three.js基础探寻二——正交投影照相机

本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机. 2.两种相机的区别与适用范围正交投影: 透视投影: 正交投影就像数学课上画的:而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小. 对于制图.建模软件通常使用正交投影:而对于其他大多数应用,通常使用透视投影. 3.正交投影照相机正交投影照相机的构造函数: Three.Orthog

Three.js基础探寻七——Lamber材质与Phong材质

材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong). MeshBasicMaterial:对光照无感,给几何体一种简单的颜色或显示线框. MeshLambertMaterial:这种材质对光照有反应,用于创建暗淡的不发光的物体. MeshPhongMaterial:这种材质对光照也有反应,用于创建金属类明亮的物体. 1.基本材质使用基本材质(Ba

Three.js基础探寻九——网格

在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(ParticleSystem)等.创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色.纹理等信息. 本篇将介绍创建较为常用的物体:网格,然后介绍如何修改物体的属性. 1.创建网格在前几篇中,我们学习了如何创建几何形状与材质,而网格的创建非常简单,只要把几何形状与材质

Three.js基础探寻四——立方体、平面与球体

前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值.其构造函数是: THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments) width:x方向上的长度 height:y方向上的长度 depth:z方向上的长度 w

Three.js基础探寻五——正二十面体、圆环面等

除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segments, thetaStart, thetaLength) radius:半径 segmentsWidth:经度上的分段数 segmentsHeight:纬度上的分段数 thetaStart:纬度开始的弧度 thetaLength:纬度跨过的弧度 new THREE.CircleGeometry(3,

Three.js基础探寻六——文字形状与自定义形状

1.文字形状说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helvetiker字体为例.引用: <script type="text/javascript" src="你的路径/helvetiker_regular.typeface.json"></script> TextGeometry的构造函数是: THREE.

Three.js基础探寻三——透视投影照相机

本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数透视投影照相机(Perspective Camera)的构造函数是: THREE.PerspectiveCamera(fov, aspect, near, far) - fov 可视角度 - aspect 实际窗口的纵横比 - near 近处的裁面的距离 - far 远处的裁面的距离只有离相机的距离大于near值,小于far值,且在相机的可视角度之内,才能被相机投影到. 让我们通过几

[妙味JS基础]第八课：return、定时器基础

知识点总结 return 1)函数名+括号＝ return 返回值 2)所有的函数默认的返回值＝未定义 3)return后面的代码不执行 arguments =>为实参的集合,当参数个数无法确定时使用 style.cssText. getComputedStyle.currentStyle 1.style和cssText为行间样式 2.getComputedStyle和currentStyle为浏览器计算后的样式 getComputedStyle(元素).属性元素.currentSty

Three.js基础

Three.js基础探寻一 Three.js基础探寻一 1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SVG标签的渲染器. 这是一个开源项目. 3.环境找一个喜欢的jsIDE.调试建议使用Chrome或者Firefox. 4.下载传送门 5.使用 <head> <script type="text/javascript&q

Bootstrap <基础十八>面包屑导航（Breadcrumbs）

面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表.分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加: .breadcrumb > li + li:before { color: #CCCCCC; content:

Web3D编程入门总结——WebGL与Three.js基础介绍

/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结.*/ /*第一部分,webgl与three.js基础介绍,要求读者掌握JavaScript入门知识*/ //webgl原理:通过JavaScript语言在浏览器端生成glsl代码,把glsl代码送入显卡执行,把执行结果显示在浏览器中 //简单例程: //根据Tony Parisi著

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数函数的声明及调用 1.函数的声明格式: func

JS基础学习1

1 JS 概述一个完整的javascript实现是由以下3个不同部分组成的: (1) 核心(ECMAscript) (2) 文档对象模型(DOM) Document object model (整合js,css,html) (3) 浏览器对象模型(BOM) Broswer object model(整合js和浏览器) (4) Javascript在开发中绝大多数情况是基于对象的,也是面向对象的 ECMAscript描述了以下内容: 语法类型语句关键字保

前端面试题目汇总摘录（JS 基础篇）

JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // object typeof isNaN; // function typeof isNaN(123); //boolean typeof []; // object Array.isArray(); // false toString.call([]); // [object Array] var a

js基础梳理-如何理解作用域和作用域链？

本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关于作用域的定义,只是在"4.2执行环境及作用域"中简单说了下执行环境(execution context)的概念.而执行环境其实就是之前博客:js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?中的执行上下文. 而在<JavaScript权威指南>中,对作

前端面试题目汇总摘录（JS 基础篇 —— 2018.11.02更新）

温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // object typeof isNaN; // function typeof isNaN(123); //boolean typeof []; // object Array.isArray(); // false toString.call([]); // [object

JS基础-全方面掌握继承

前言上篇文章详细解析了原型.原型链的相关知识点,这篇文章讲的是和原型链有密切关联的继承,它是前端基础中很重要的一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS中的各种继承方式和优缺点进行,希望看完本篇文章能够对继承以及相关概念理解的更为透彻. 本篇文章需要先理解原型.原型链以及call的相关知识: JS基础-函数.对象和原型.原型链的关系 js基础-面试官想知道你有多理解call,apply,bind? 何为继承? 维基百科:继承可以使得子类具有父类别的各种属性和方法,而不需要再次编

Three.js基础探寻八——法向材质与材质的纹理贴图九

热门专题