js向webgl传值（js传值到html）

本文目录一览：

1、js如何开启webgl加速
2、WebGL初探—Three.js全景图实战
3、js代码能否实现强制开启浏览器的webgl
4、threeJS 导入模型（不确定尺寸）后如何确定相机位置及物体缩放比例
5、如何调用unity3d webgl 的js

js如何开启webgl加速

需要为Chrome加入一些启动参数

Chrome浏览器的用户请找到Chrome浏览器的快捷方式，如果没有就创建一个快捷方式（右键点击chrome.exe，选择“创建快捷方式”或者“发送到”→“桌面快捷方式”），右键点击快捷方式，选择属性。

在目标框内，双引号的后边，加入以下内容：

–enable-webgl –ignore-gpu-blacklist –allow-file-access-from-files

关闭目前开启的所有Chrome窗口，然后用此快捷方式启动Chrome浏览器。

其中：

–enable-webgl 表示开启WebGL支持

–ignore-gpu-blacklist 表示忽略GPU黑名单，也就是说有一些显卡GPU因为过于陈旧等原因，不建议运行WebGL，这个参数可以让浏览器忽略这个黑名单，强制运行WebGL

–allow-file-access-from-files 表示允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL，只是想要看一下WebGL的Demo，那你可以不添加这个参数

WebGL初探—Three.js全景图实战

前段时间公司给了一个新需求就是写一个装修室内3D全景效果图，于是开始我的three.js开发之旅。

作为一个前端小白，突然接触three.jswebgl除了懵逼还是懵逼，不过作为一个技术人对于挑战也许就是软件开发中真正的乐趣，至少不会埋头调试一遍又一遍重复的页面数据，上上下下左左右右BABA……简直枯燥到极点。不过three.jswebgl不得不说给我打开了新的世界，接下来我就简单讲述一下我的学习之旅。

Three.js 是一款运行在浏览器中的 3D 引擎，是JavaScript编写的WebGL第三方库，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象,three.js内部也是webgl的封装，封装了大量了webgl API ，让比较繁琐的webgl更加简便。

WebGL（全写Web Graphics Library）是一种3D绘图协议，它让可以让开发进一步去了解图形渲染，Webgl是JavaScript和OpenGL ES 2.0合并出来的升级版，通过webgl可以让前端开发者们脱离开css渲染，可以了解更加底层的渲染，WebGL也可以为HTML5 Canvas提供硬件3D加速渲染，webgl是通过系统显卡来在浏览器里更流畅地展示3D场景和模型，加入shader(着色器)来对图形渲染，学习webgl需要具备相应的图形学算法，属于目前图形渲染开发的高级技术之一。目前webgl也运用在游戏，视频特效，包含untiy3D也是集成webgl。

three.js中主要由摄像机，场景，渲染器 , 资源加载器，素材组成

webgl中的所有东西都是基于摄像机去展示的，可以利用摄像头的视角形成对3d视图观测视角，比如鱼眼视角，从而就让我们可以在平面图上可以开发出真实场景的3D视图。接下来我们看看怎么用three.js创建一个摄像机：

摄像机有了但是为了让景物可以更好的展现，这时候我们就需要一个展示景物的场景，three.js也为我们封装好了，如下所示可以创建一个场景：

渲染器是webgl的渲染启动开关，他可以调用render方式把场景渲染到摄像机。

three.js加载资源不同我们常见的html一样，直接通过src属性加载，而是通过TextureLoader.load来加载资源。

素材常见的包含网格，灯光等许多元素下面我就举个例子

通过这次基于three.js的webgl全景图开发之旅为我对视图渲染打开了一道新的大门，不过webgl的厉害之处还有很多很多是我还未涉及到了，以后还需要更加努力了。

js代码能否实现强制开启浏览器的webgl

webgl需要浏览器支持

js不能调用任何浏览器不提供接口的功能

由于启用webgl这个功能在低版本浏览器中需要用户手动开启实现性功能，浏览器并未提供接口供js使用，来开启此功能，所以不能通过js强制开启

threeJS 导入模型（不确定尺寸）后如何确定相机位置及物体缩放比例

1、打开threeJS软件，任意创建一个模型。

2、然后选择模型并单击“选择并均匀缩放”按钮。

3、将光标移动到X轴上，则X轴变为黄色，且光标的形状发生变化。

4、按住回鼠标左键拖动光标，则模型随着光标的移动发生变化，同理，其他轴也是这样的，

5、鼠标放在三角中间，按住鼠标左键拖动光标，则模型在X、Y、Z三个方向同时变化。如图所示

6、第二种模式“选择并非均匀缩放”跟第一种模式是一样的，

7、鼠标左键按住缩放按钮不放，在弹出的工具菜单中选择“选择并挤压缩放”按钮，将鼠标移动到三角形标识上，向内进行缩放操作，可以看到模型外观发生了巨大的变化，如图所示。

8、完成图。

注意事项：

three.js封装了一些3D渲染需求中重要的工具方法与渲染循环。它的教程同样可以在hiwebgl里面找版到。

three.js之于webgl，类似于windows版本的虚幻引擎之于D3D。当然，虚幻引擎的能力范围比three.js大得多。d3.js跟上面两者没有关权系。

如何调用unity3d webgl 的js

开发网页js代码交互：

方向一：你可以调用Application.ExternalCall() 和Application.ExternalEval()在你嵌入的网页中执行 JavaScript代码.

方向二：在网页的js代码中执行Unity中GameObjects的方法：例如

SendMessage (‘MyGameObject’, ‘MyFunction’, ‘foobar’)

《二》Application.ExternalCall调用JS函数

public static function ExternalCall(functionName: string, params args: object[]): void;

原创文章，作者：FWESB，如若转载，请注明出处：https://www.506064.com/n/317201.html