three.js透明立方体

《Three.js 入门指南》3.1.1 - 基本几何形状-立方体（CubeGeometry）

3.1 基本几何形状立方体(CubeGeometry) 构造函数: THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments) width:是x方向上的长度: height:是y方向上的长度: depth:是z方向上的长度: 后三个参数分别是在三个方向上的分段数,一般情况下不需要分段的话,可以不设置后三个参数,后三个参数的缺省值为1.其他几何形状中的分段也是类似的,下面不做说明.

WebGL学习笔记（十一）：混合和透明

到目前为止我们绘制了不少模型,用到了不少颜色,颜色中有四个分量(RGBA),其中的A分量表示透明度,这个分量目前为止我们还没有真正的用到: A分量,表示的是当前的透明度,如果设定为 0.5 就会半透明,可以看到半透明的模型,也可以看见模型后面的东西: 开启混合要实现透明,需要开启混合,会使用到下面的两个方法: // 开启混合 gl.enable(gl.BLEND); // 设定混合效果 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 源因

【翻译】基于web创建逼真的3D图形 | CSS技巧

个人翻译小站:http://www.zcfy.cc/article/creating-photorealistic-3d-graphics-on-the-web-css-tricks-4039.html 翻译原文链接:https://css-tricks.com/creating-photorealistic-3d-graphics-web/ 在成为一名web开发者之前,我从事于视觉设计行业,创造屡获殊荣,电影和电视节目等高端3D效果,例如 Tron, The Thing, Resident E

UniEAP V4 WorkShop用户手册

版权声明<UniEAP V4 WorkShop用户手册>的版权归东软集团(大连)有限公司所有.未经东软集团(大连)有限公司的书面准许,不得将本手册的任何部分以任何形式.采用任何手段(电子的或机械的,包括照相复制或录制).或为任何目的,进行复制或扩散.Copyright© 1997-2011 东软集团(大连)有限公司.版权所有,翻制必究. ®是东软软件股份有限公司的注册. 更改履历版本号更改时间更改的图表和章节号状态更改简要描述更改申请编号更改人批准人1.0 2011-07-08

关于Web前端密码加密是否有意义的总结

关于Web前端密码加密是否有意义的总结 : https://blog.csdn.net/hla199106/article/details/45114801 个人:加密涉及到的是前后端的数据传递,加密不是前端一个人的事.(前端脱敏是没有意义的,但是加密是有实际作用的) 加密方法: 1.AES加密算法的详细介绍与实现:https://blog.csdn.net/qq_28205153/article/details/55798628 (后端怎么实现加解密,这里不做说明) 实际开发中我使

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在网上汇总了一些这样的代码. 二.3D效果代码 2.1.旋转相册 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转相

DD_belatedPNG.js解决透明PNG图片背景灰色问题

使用及其简单,上面代码表示IE6下加载DD_

IOS修改webView背景透明以及IOS调用前台js的方法

工作上遇到IOS的webView中的H5页面需要透明以显示webView的背景颜色.用H5自身的透明度的css样式或者js控制背景颜色及透明度都打不到想要的效果,最后还是通过ios设置webView中的body颜色及透明度来实现的,具体代码如下: -(void) webViewDidFinishLoad:(UIWebView *)webView { [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTa

(转载)IE6支持透明PNG图片解决方案:DD_belatedPNG.js

DD_belatedPNG.js 是一个能是IE6支持p显示ng透明图片,而且还支持背景循环(background-repeat)和定位(backgrond-position) ,支持focus,Hover. 使用方法: <!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('.png_bg');</script>

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas

IE6支持透明PNG图片解决方案:DD_belatedPNG.js

DD_belatedPNG.js 是一个能是IE6支持p显示ng透明图片,而且还支持背景循环(background-repeat)和定位(backgrond-position) ,支持focus,Hover. 使用方法: <!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('.png_bg');</script>

[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现反色,黑白,亮度,复古,蒙版,透明等美颜效果. getImageData:获取一张图片的像素数据 cxt.getImageData( x, y, width, height ) x:图片所在的x坐标 y: 图片所在的y坐标 width,height 要获取的像素区域返回值是一个对象,对象包括一个d

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">

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，从立方体开始

目前three.js是浏览器展现3D效果的一个很强大的js工具,遗憾的是没有特别系统而全面的文档(threejs官方文档感觉有些缺漏,可以和WebGL中文网的threejs教程对比着看).好了,根据WebGL中文网的threejs教程开始学习,因为教程里的部分代码已经不适用(过时)了,导致学习的时候有些磕磕绊绊,故记录下自己编写的代码,以便以后查阅. 1.index.html <!DOCTYPE html> <html lang="en"> <head&g

仿智能社官网：原生JS实现简单又酷炫的3D立方体时钟

先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默认你已经做好了6个立方体,直接上JS代码: 页面进来的时候,先给6个立方体赋值上现在的时间,由于立方体比较小,左右2个面看不清且影响效果,这里左右2个面就不赋time了: //获取元素 var oul = document.querySelectorAll("ul"); var back

js让页面逐渐变透明,直到消失

在gitHub闲逛的时候,无意间发现了些好玩的代码,一个歪果仁写的,这里我做了些修改和优化,gitHub链接已经忘了,是一段恶搞的js代码,假如你的顾客或者老板拖欠你工资,那你就可以让项目页面在浏览器慢慢变透明,直到消失,代码很简单,但脑洞清奇,不妨来试试吧 // 设定时间,页面慢慢变透明,直到消失 var opacityInterval = setInterval(function () { // 普通时间转为格林威治时间 var targetDate = new Date('2019-05-

解决IE6下PNG透明的JS插件:DD_belatedPNG.js

DD_belatedPNG是一款解决IE6下PNG透明的JS插件,支持background-position和background-repeat属性,支持伪类.使用方法: <!--[if lte IE 6]> <script type="text/javascript" src="JS/DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('#png,.png')

three.js立方体

<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - geometry - cube</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, m

IE6兼容透明JS

DD_belatedPN

three.js透明立方体

热门专题