今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。...1. three.js材质基类 所有其他材质类型都继承了Material。 下面是一些属性： .alphaTest : Float 设置运行alphaTest时要使用的alpha值。...其他选项有THREE.BackSide和THREE.DoubleSide。 .transparent : Boolean 定义此材质是否透明。...其他选项有THREE.VertexColors 和 THREE.FaceColors。....toJSON ( meta : object ) : null meta -- 包含元素，例如材质的纹理或图像。 将材质转换为three.js JSON格式。
之前说过网格（Mesh） = 几何体（Geometry） + 材质（Material），也就是一个物体是有它的形状和材质来决定。...联合材质 上面的MeshDepthMaterial材质是一种由摄像机距离来确定的样式的材质，它不能设置颜色，但是大多数的时候我们需要设置一个颜色，那怎么做呢？...由上面我们知道MeshBasicMaterial是可以设置颜色的，只要把两种材质联合起来就可以了，这里说的联合材质并不是一种材质，而是把多个材质混合起来的一种办法，要使用联合材质首先需要引入SceneUtils.js...在老版本的three.js中有一个名叫MeshFaceMaterial的材质可以让不同面拥有不同的材质，这里就不简绍已经废弃的MeshFaceMaterial了。...---- 至此，three.js的基本概念我们已经讲完了，大家是不是收获满满？three.js看似东西多，其实基本套路都是一样的，就比如基本上所有的设置材质的方法都是类似的。
text/css" rel="stylesheet" href="css/index.css"> <script src="src/OrbitControls.<em>js</em>
webpack 本身就是为了打包js所设计，作为第一节，介绍怎么打包js。 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD。...创建vendor文件夹，其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。...: path.resolve(__dirname, "dist"), // 打包文件的输出目录 filename: "bundle.js" } }; 注意output.publicPath...收尾 打包后的js文件会按照我们的配置放在dist目录下，这时，需要创建一个html文件，引用打包好的js文件。...然后在 Chrome 打开(这节课只是打包js,不包括编译es6)，就可以看到我们代码的运行结果了。 4. 更多 本节的代码地址：>>> 点我进入 项目的代码仓库：>>> 点我进入
今天郭先生说一说如何在three.js着色器中添加纹理，先看看今天要完成的效果，在线案例请点击着色器纹理。...image.png 捕57获.PNG 这里我们分别引入三个纹理，分别是地球的表面纹理，对应的海拔灰度图，和云朵的纹理。...云朵的纹理的wrapS和wrapT设置成THREE.RepeatWrapping，这是让纹理简单地重复到无穷大，而不至于0,0到1,1的范围。...这里还是用了mix方法，mix方法返回线性混合的x和y，如：x(1−a)+ya。
打包压缩js与css 由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin）来完成对JS与CSS的压缩混淆，无需引用额外的插件, 其命令webpack...uglify-js的发行版本只支持ES5，如果你要压缩ES6+代码请使用兼容开发分支。... 标准输出 STDERR 标准错误输出 side effects函数副作用，即函数除了返回外还产生别的作用，比如改了全局变量 列一份配置： //使用插件html-webpack-plugin打包合并...html //使用插件extract-text-webpack-plugin打包独立的css //使用UglifyJsPlugin压缩代码 var HtmlWebpackPlugin = require.../src/js/main.js' }, output: { filename: "[name]-[hash].js", path: __dirname +
这篇郭先生说一下three.js着色器的内置变量，他们有 gl_PointSize：在点渲染模式中，控制方形点区域渲染像素大小（注意这里是像素大小，而不是three.js单位，因此在移动相机是，所看到该点在屏幕中的大小不变...下面来分别说一说他们的意义和用法。...gl_FragColor = vec4(1.0,1.0,0.0,1.0); } } ` image.png 捕获.PNG 这里以600像素为分界，x值小于600像素的部分，材质被渲染成红色
这篇郭先生在练习一下着色器变量，在度娘上面或者官网上经常看到类似水波一样的效果，这篇就试着做一个这样的效果，顺便巩固一下顶点着色器和片元着色器，毕竟多多练习才能更好地掌握。...设置着色器材质 var material = new THREE.ShaderMaterial({ vertexShader: ` attribute float noise;/...position; vec3 newPosition = position + normal * noise;//这里比较重要，顶点坐标加上球面法向量乘以噪声，得到新的顶点坐标，新的坐标是和normal
添加所需模块 （1）已经存在的模块 （2）重新添加一个终端，这样就会将模块安装在虚拟环境中了 （3）安装缺少的模块 （4）安装打包模块 pip install pyinstaller -i https...://pypi.douban.com/simple/ （5）打包程序 pyinstaller -F -w main.py 三、运行 1. dist文件夹下找到exe文件 2.
上一篇说顶点着色器和片元着色器的皮毛，这篇郭先生说一说着色器变量，通过变量可以设置材质。先看看今天要做的如下图。在线案例请点击红绿灯。...比如灯光，雾，和阴影贴图就是被储存在uniforms中的数据。 uniforms可以通过顶点着色器和片元着色器来访问。 Varyings 是从顶点着色器传递到片元着色器的变量。...例如，顶点位置，法线和顶点颜色都是存储在attributes中的数据。attributes 只可以在顶点着色器中访问。 嗯，现在我们知道了这些变量的用法，接下来我们使用它。 1....modelViewMatrix * vec4( position, 1.0 ); } 这里我们定义一个三维向量vPosition，用来将顶点着色器里面的position属性传递到片元着色器中（three.js...} else {//其余部分为灰色 gl_FragColor=vec4(0.2, 0.2, 0.2, 1.0); } } 这里我们使用顶点着色器传过来的向量vPosition和uniform
上一篇郭先生在例子中用到了着色器变量中的uniform和varying。...这节继续结合例子将一下attribute变量，在使用过程中也发现由于three.js的版本迭代，之前的一些属性和参数已经发生了改变，ShaderMaterial也不需要传递attributes属性值，查看源码我们可以看到如果传递了...设置着色器材质 这里重点就是顶点着色器，要做出水波的效果其实是两个方向正弦效果的叠加，所以设置一个centery，它是中心点的y坐标，它会随时间高低变化。...gl_FragColor = vec4(0.0,0.5,0.8,1.0); } ` }); 好了，到此为止，我们结合案例说了着色器变量uniform，varying和attribute
郭先生发现在开始学习three.js着色器材质时，我们经常会无从下手，辛苦写下的着色器，也会因莫名的报错而手足无措。...原因是着色器材质它涉及到另一种语言--GLSL，只有懂了这个语言，我们才能更好的写出着色器材质，利用好的我们的GPU。 1. 和角度相关的函数 下面是一个和角度相关的函数，他们的用法我们度熟悉。...常用函数 这里是常用函数，和js中的内置函数很像，需要牢记。...的模 min(x, y) 返回x和y的值较小的那个值。...max(x, y) 返回x和y的值较大的那个值。
要使用纹理贴图，首先要创建一个纹理加载器，纹理加载器返回一个Texture 纹理对象，通过纹理加载器加载贴图材质 然后通过设置材质的颜色贴图map属性的值为上面的Texture来调用，下面我们创建一个立方体...} from 'three/addons/controls/OrbitControls.js'// 场景const scene = new THREE.Scene() // 几何体const geometry...UV坐标 顶点UV坐标是一个取值范围在0~1之间的二维顶点坐标；顶点UV坐标的作用是从纹理贴图上提取像素，并映射到网格模型Mesh的几何体表面上；顶点UV坐标geometry.attributes.uv和顶点位置坐标...MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时将进行镜像 如设置一个平面平铺上面的木头材质，可以设置贴图的wrapS 和wrapT 为RepeatWrapping， 通过设置...THREE.RepeatWrappingtexture.wrapT = THREE.RepeatWrapping// uv两个方向纹理重复数量texture.repeat.set(5,5) 关于纹理贴图和纹理材质就先到这里吧
在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做(比如jquery)，这里我介绍下如何让通过原生的js来实现像框架一样的动画效果！...; } else{ obj.style.width = obj.offsetWidth+speed+’px’; } },30); } } //offsetWidth获取的是元素实际的宽度(包括边框和内边距...准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14、safari 5则弹出“undefined”。...虽然结果不同，但是可以发现chrome和safari也都和火狐一样，顺利地读取到了属性值。...其实这九种原生js动画效果，都有独特之处，每个源码都可以直接复制运行，希望对大家掌握js动画有所帮助。 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
首先要选中项目中的真机測试,不要模拟器 ,然后从上边的菜单条中找product 2 选中product里面的archive 3 选择archive后,会出现一个页面, 后边会有两个选项,各自是 Validate 和
Node.js 是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。...JXcore 是一个支持多线程的 Node.js 发行版本，基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 这篇文章主要是要向大家介绍 JXcore 的打包功能。...root root 4096 Mar 21 06:10 scripts drwxr-xr-x 2 root root 4096 Feb 15 11:56 style 接下来我们使用 jx 命令打包以上项目...，并指定 index.js 为 Node.js 项目的主文件： $ jx package index.js index 以上命令执行成功，会生成以下两个文件： index.jxp 这是一个中间件文件，包含了需要编译的完整项目信息...---- 载入 JX 文件 Node.js 的项目运行： $ node index.js command_line_arguments 使用 JXcore 编译后，我们可以使用以下命令来执行生成的 jx
如何将python中的文件打包成exe文件： 首先，在cmd中输入pip3 Install pyinstaller 他就会开始下载pyinstaller 下载成功后就点进去你想去打包的代码中，我使用的是...pycharm，然后点击terminal，输入 Pyinstaller -F XXXX.Py 其中XXXX指的是你要打包的文件名，弄好之后你就成功将其打包成exe文件了，下载后里面会显示你的exe...文件的路径，去找就好了，发送给别人的话我是压缩后发送的 以下是pyinstaller功能的一些注释 如何将python中的文件打包成exe文件： 首先，在cmd中输入pip3 Install pyinstaller...他就会开始下载pyinstaller 下载成功后就点进去你想去打包的代码中，我使用的是pycharm，然后点击terminal，输入 Pyinstaller -F XXXX.Py 其中XXXX指的是你要打包的文件名...，弄好之后你就成功将其打包成exe文件了，下载后里面会显示你的exe文件的路径，去找就好了，发送给别人的话我是压缩后发送的，这样别人即使没有python的运行环境也能运行 以下是pyinstaller功能的一些注释
说起three.js，着色器材质总是绕不过的话题，今天郭先生就说一说什么是着色器材质。...着色器材质是很需要灵感和数学知识的，可以用简短的代码和绘制出十分丰富的图像，可以说着色器材质是脱离three.js的另一块知识，因此它十分难讲，我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。...什么是着色器材质 着色器材质（ShaderMaterial）是一个用GLSL编写的小程序 ，在GPU上运行。...着色器材质的变量 每个着色器材质都可以指定两种不同类型的shaders，他们是顶点着色器和片元着色器(Vertex shaders and fragment shaders)。...着色器材质的使用 上面说了每个着色器材质都可以指定两种不同类型的shaders，不过如果我们不去指定这两个shaders而直接使用也不会报错，因为ShaderMaterial已经定义了默认的顶点着色器和片元着色器
通过了解这些，希望会有助于我们开发时从更多的角度和方向来认识打包工具及其发展，进而选用更加适合我们项目的打包工具。 1. Rollup “Rollup专注于JavaScript的打包。...首先全局安装Rollup npm install rollup -g 然后创建Rollup配置文件rollup.config.js以及需要打包的项目文件app.js： // rollup.config.js...而如果我们使用webpack去打包处理，则会多出许多冗余产物，即使我们将上述的一行js进行打包，打包后资源文件也至少会有几十行代码存在。...它的出现，则是正好契合了当时开发者对于Webpack打包速度慢和配置复杂的抱怨，从而吸引许多用户转用Parcel。...小结 本篇介绍了JavaScript社区中两个除了webpack之外比较主流的两个打包工具：Rollup和Parcel。
保证电脑和手机（或模拟器）的网络可以正常相连 这里所说的相连是指处于同一个局域网的环境下，有问题请看上一篇Auto.js脚本开发环境搭建。 2....打包应用程序 在保存到手机上面的文件右侧打开下拉菜单，选择"更多"。 选择"打包应用“。 ...把上面的文件复制到电脑上进行编辑，加入隐藏日志的代码，再打包的应用程序在打开后就不会出现日志文件了。 5. Auto.js Pro版本打包有什么不同?...Auto.js Pro版本在打包上做了一些优化，主要区别如下： 1. 没有安装打包插件，也可以正常的打包； 2. 新增如下配置选项，可酌情进行选择； 3....用Auto.js Pro版本的无法打包Auto.js 4.1.1版本的，即使打包出来也无法正常使用；
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
