为广大html5 3d开发的朋友们演示 代码贴图，请下载附件demo
<html>
<head>
<title>3DS model</title>
<script src="CanvasMatrix.js" type="text/javascript"></script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aPos;
attribute vec3 aNorm;
uniform mat4 mvMatrix;
uniform mat4 prMatrix;
varying vec3 col;
const vec4 dirDif = vec4(0., 0., 1., 0.);
const vec4 dirHalf = vec4(-.4034, .259, .8776, 0.);
void main(void) {
gl_Position = prMatrix * mvMatrix * vec4(aPos, 1.);
vec4 rotNorm = mvMatrix * vec4(aNorm, .0);
col = vec3(1., 1., 1.) * max( 0., dot(rotNorm, dirDif) );
// col += vec3(1., 1., 1.) * pow( max( 0., dot(rotNorm, dirHalf) ), 40.);
//文章来自http://wjlgryx.iteye.com
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec3 col;
void main(void) {
gl_FragColor = vec4( col, 1.);
}
</script>
<script type="text/javascript" src="m1.js">
</script>
</head>
<body onLoad="webGLStart();" onResize="webGLStart();">
<center>
<canvas id="canvas" width="696" height="696"></canvas>
</center>
<video id="video" autoplay loop style="display:none">
<!--<source src="sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>-->
<source src="sintel.mp3" type='video/ogg; codecs="theora, vorbis"'>
</video>
</body></html>
分享到：
相关推荐
在Web开发领域，Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建和展示3D图形。这个库使得开发者能够构建丰富的交互式三维场景，而无需深入理解底层的WebGL API。本教程将深入探讨如何使用Three.js来...
总的来说，PDF.js 提供了一个强大的 PDF 渲染引擎，通过对其组件和事件的深入理解和定制，我们可以创建符合特定需求的 PDF 查看器。这个“pdf.js 使用 demo（已解决隐藏打印下载等按钮）”就是这样一个实践案例，...
在本实例中，我们主要探讨的是如何利用three.js库加载并展示一个3D坦克模型。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建和操作3D图形变得简单易行。以下是对该实例涉及知识点的详细解析： 1. **...
jspdf.js和demo,jspdf.js,jspdf.min.js,pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件。 pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析...
这是一个简单的pdf.js页面demo程序 你可以在该页面使用 live-sever 插件打开 这个可以让你更加方便测试各种pdf.js版本 gitee: https://gitee.com/cwxbox/pdf-js-demo/tree/master/
Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程。这个初学demo是为那些刚开始接触Node.js的人准备的，通过实例化操作，可以帮助理解Node.js的基本概念和工作...
Node.js Https DEMONode.js Https DEMONode.js Https DEMONode.js Https DEMONode.js Https DEMO
"pdf.js 使用 demo" 提供了一组示例，帮助开发者了解如何在实际项目中集成和使用这个库。 首先，`index.html` 是主入口文件，通常包含基本的 HTML 结构，引入 pdf.js 库的 CSS 和 JavaScript 文件，以及设置一个或...
"three3D 模型切换Demo" 是一个基于three.js库的示例项目，它展示了如何在Web浏览器中实现3D模型的动态切换。three.js是JavaScript的一个强大库，专门用于创建和展示三维图形，特别是在WebGL的支持下，能够提供高...
总结起来，Three.js 3D图形Demo项目是一个实践教程，涵盖了从基础的3D对象创建到高级的视频纹理应用。通过研究这个Demo，开发者可以深入理解Three.js的API，掌握如何在前端实现交互式3D图形。对于想要提升WebGL和3D...
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
FLV.js 是一个开源的 JavaScript 库，它允许在 HTML5 的 `<video>` 标签中播放 FLV（Flash Video）格式的视频内容。FLV 作为传统的流媒体格式，曾经广泛应用于网页视频播放，而随着 Flash 技术的逐渐淘汰，FLV.js ...
PDF.js是Mozilla开发的一个开源项目，它允许开发者使用纯JavaScript在Web浏览器中渲染PDF文档，无需依赖任何插件。这个Demo展示了如何利用PDF.js库实现PDF在线预览和打印功能，同时还提供了页面缩放和打开本地PDF...
在JavaScript代码中，可以按需导入Three.js的模块，创建3D场景、物体和动画。 【项目结构与文件】 "threejs-webpack-demo-master"这个压缩包文件很可能包含了以下组件： 1. `src`目录：存放项目源代码，包括入口...
标题 "基于paddlejs的垃圾分类小程序，也是Paddle.js 的demo.zip" 提示我们这是一个使用Paddle.js开发的垃圾分类应用程序的实例。Paddle.js是由阿里云开发的前端深度学习框架，它使得在浏览器环境中运行预训练的深度...
本项目名为“three.js渲染钻石demo”，其主要目标是利用three.js库来呈现一个逼真的钻石模型。 **描述：“three.js+glsl渲染钻石”** 描述中提到的“glsl”是OpenGL着色语言（GL Shading Language）的缩写，这是一...
压缩包中的 `mock_demo` 文件可能包含了一个简单的Mock.js使用示例，通常包括以下部分： 1. 定义 Mock 规则的 JavaScript 文件，如 `mock.js`。 2. 前端代码，使用这些模拟数据进行界面渲染和逻辑处理，可能包括 ...
在本项目中，我们主要探讨如何使用Three.js、原生JavaScript和jQuery来创建一个3D机房模拟系统。这个系统不仅展示了一个逼真的3D环境，还具备实用的功能，如设备管理、告警处理和机柜布局调整。下面将详细阐述这些...
而three.js是JavaScript最流行的3D库之一，它提供了丰富的功能来创建和展示交互式的3D内容。 首先，我们来看`three.js`。这是一个强大的JavaScript库，为Web浏览器提供了创建和操作3D图形的能力。它支持各种3D对象...