WebGL | 易学教程

webGL之three.js入门4--ThreeJS Editor入门篇

阅读更多关于 webGL之three.js入门4--ThreeJS Editor入门篇

因为工作需要，要看threejs editor的源码，顺便记录过程。 github下载的源码目录是这样的但是editor和其他文件夹内的内容的关联的，我需要将其独立出来并且编辑editor。进入editor，three.js-master\editor，打开index.html，从源码可以看出来，里面引用了上级目录的一些.js文件。所以，要独立出来，就把../examples/js文件夹下的所有内容拷贝到three.js-master\editor\js目录下。然后把index.html中的“../examples/js”全部替换为“js”,步骤是:"ctrl+F"-->"Find All" ，这样就全部选中了，然后全部替换为“js” 这样，这个editor文件夹就从threejs master中独立出来了。下面来看看index.html，有人会好奇，这里面没有写人任何样式和布局。其实 < link href ="css/main.css" rel ="stylesheet" /> < link id ="theme" href ="css/light.css" rel ="stylesheet" /> <link rel="stylesheet" href="js/libs/codemirror/codemirror.css"> <link rel=

Showing Coordinate Lines of a 3D earth

阅读更多关于 Showing Coordinate Lines of a 3D earth

问题 Here is a 3D earth made based on Three js I want to find the location of Longitude and Latitude of the currently clicked location and show the coordinate lines What should be the strategy to define those diversion lines? How could I map my texture to it's correct equivalent Longitude/Latitude? Edit 1 : My question in a simpler form: How can I get the x, y of the pattern image which was clicked inside the sphere? 来源： https://stackoverflow.com/questions/10431632/showing-coordinate-lines-of-a-3d

threejs canvas todataurl is blank

阅读更多关于 threejs canvas todataurl is blank

问题 Okay, I know that canvas.toDataUrl() will produce an image in png format. However, when I try to get the image from http://threejs.org/examples/#webgl_lines_sphere. All I see is a black image on chrome. To replicate the steps - 1) Open dev console and select the canvas element. 2) canvas = $0 3) context = canvas.getContext('webgl', {preserveDrawingBuffer: true}) 4) img = canvas.toDataUrl() 5) document.write('<img src="'+img+'"/>') The image is blank. However, I tried with a different canvas

unity 发布WebGL，自适应代码

阅读更多关于 unity 发布WebGL，自适应代码

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unity WebGL Player | WebGlUnity</title> <script src="Build/UnityLoader.js"></script> <script> var gameInstance = UnityLoader.instantiate("unityContainer", "Build/WebGl.json"); </script> <script type="text/javascript"> function Reset() { var canvas = document.getElementById("#canvas"); canvas.height= document.documentElement.clientHeight; canvas.width = document.documentElement.clientWidth; console.log(canvas.width ); } </script> </head> <body onload=

How to detect collision in webgl?

阅读更多关于 How to detect collision in webgl?

问题 How to detect collision in webgl, without using any library like three.js? 回答1: How to detect collision in webgl You don't. WebGL, like OpenGL is only for drawing stuff. It doesn't manage a scene, it has no notion of "objects" or such high level things like collisions. It's all about points, lines, triangles and shaders. Anything related to scene management or collisions lies outside the scope of WebGL (and OpenGL). 回答2: A simple approach it to do ray collision detection on the GPU. Checkout

基于 HTML5 WebGL + WebVR 的 3D 虚实现实可视化系统

阅读更多关于基于 HTML5 WebGL + WebVR 的 3D 虚实现实可视化系统

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前言 2019 年 VR , AR , XR , 5G , 工业互联网等名词频繁出现在我们的视野中，信息的分享与虚实的结合已经成为大势所趋， 5G 是新一代信息通信技术升级的重要方向，工业互联网是制造业转型升级的发展趋势。本文所讲的 VR 是机械制造业与设备的又一次交流，当技术新星遇上制造潮流，无疑将成为制造业，工控业等行业数字化转型的重要驱动力。 “5G + VR + 工业互联网” 必将成为新的一年不变的话题，如何将当前工业中遇到的问题通过虚拟现实结合起来，让我们可以更近的去交流，去感受技术带给我们的变化。在今年苹果的发布会上，相信大家都知道苹果的 5G 手机没有问世，说明 5G 的应用和发展还处在快速发展的阶段，但是手机结合 AR 功能的 APP 已经早就问世， 5G 的速度加上 AR, VR 的身临其境，让我们感受到的不仅仅是技术的革新，更是让我们感受到技术在不同领域的实际应用场景，我相信 2020 年新的一年必定是 “5G + VR + 工业互联网” 应用的又一个新的开始，本文接下来所讲的就是 HT for Web 结合 WebVR 开发的具体应用案例。系统预览预览地址：基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统 http://www.hightopo

Android WebView and WebGL

阅读更多关于 Android WebView and WebGL

问题 Android WebView: WebGL is not working on some devices I use Webview in my android application. The task is to add WebGL interactive elements on the screen. Application have minSdk v21. Google announced that they support WebGL in WebView v36. I check WebGL status with html5test.com page and my test web page. My test setup: Google Nexus 6P - Android 6.0.1, webView v48 - WebGL OK works Sony Xperia Z2 - Android 5.1.1, webView v48 - WebGL OK works Samsung Galaxy Note 4 - Android 5.1.1, webView v48

基于 HTML5 WebGL + WebVR 的 3D 虚实现实可视化培训系统

阅读更多关于基于 HTML5 WebGL + WebVR 的 3D 虚实现实可视化培训系统

WebGL实现HTML5的3D贪吃蛇游戏

阅读更多关于 WebGL实现HTML5的3D贪吃蛇游戏

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> js1k.com 收集了小于1k的javascript小例子，里面有很多很炫很酷的游戏和特效，今年规则又增加了新花样，传统的classic类型基础上又增加了WebGL类型，以及允许增加到2K的++类型，多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。自己写不出来，站在巨人肩膀总是有机会吧，想起《基于HTML5的电信网管3D机房监控应用》这篇提到的 threejs ， babylonjs 和 Hightopo 的几种基于WebGL的3D引擎，突然想挑战下自己实现个100行JS的3D小游戏，折腾了一番最终采用 Hightopo 搞了个3D贪吃蛇游戏，算了算JS代码还只有90来行，终于满足了自己的小小心愿写完这篇可以满意去睡觉了。 http://www.hightopo.com/demo/snake_20151106/GreedySnake.html http://www.hightopo.com/demo/snake_20151106/GreedySnake.html 以下先上一段最终3D游戏在平板上的运行交互视频效果： http://v.youku.com/v_show/id_XNjgxMzIxOTcy.html 传统2D的贪吃蛇游戏一般通过方向键盘控制蛇的前进方向

基于 HTML5 + WebGL 的无人机 3D 可视化系统

阅读更多关于基于 HTML5 + WebGL 的无人机 3D 可视化系统

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前言近年来，无人机的发展越发迅速，既可民用于航拍，又可军用于侦察，涉及行业广泛，也被称为“会飞的照相机”。但作为军事使用，无人机的各项性能要求更加严格、重要。本系统则是通过 Hightopo 的 HT for Web 产品来搭建的一款无人机 3D 可视化系统，通过对无人机及其信息的全景展示来模拟无人机状态的监控。系统中包含 4 种展示模式：实体模式、热力模式、线框模式和内部模式，通过飞机下方操作按钮即可进行模式切换。预览地址： http://www.hightopo.com/demo/Drones/ 实现过程加载界面采用 2D 拓扑组件进行绘制，全矢量化图标，与传统的 png、jpg 等格式的图片相比，完美适配移动端、PC 端、大屏等各种尺寸及分辨率屏幕，不会出现失真情况。无人机及周边信息面板采用 3D 引擎进行场景搭建，用户可从场景任意位置对无人机进行查看。动画过程采用产品提供的动画函数 ht.Default.startAnim 来驱动图形属性值的改变，应用其 Time-Based 的方式，只需要指定动画周期 duration 的毫秒数，由系统去计算帧数或 action 函数被调用的次数，以保证更加高效、平滑的进行动画过程。界面加载界面中通过动态改变图形的属性值来展现加载进度

订阅 WebGL