three.js 点乘判断平行向量方向异同
效果： 代码： <template> <div> <el-container> <el-main> <div class="box-card-left"> <div id="thr...
使用Three.js + Blender构建在浏览器端显示的3D模型（1）
前言前端3D效果的展示方法很多，如果简单的显示一个立方体，我们可以用六块div，每块div结合CSS的旋转特性，旋转出不同的角度组装出来一个盒子。当我们拖拽这个盒子的时候，...
（第三节）全景漫游 一、实验内容通过上次实验，了解了Three.js创建场景的基本步骤。这一节，我们将通过Three.js实现全景漫游功能。如下图： 全景图是获取一个3D场景中的不同角度的图片，然后通过拼接、融合实现3D的虚拟场景。例如百度地图上全景漫游。二、探讨方法1：使用软件（例如：Pano2vr ...
使用Three.js + Blender构建在浏览器端显示的3D模型（4）
第四章 使用three.js加载以图片为纹理的模型（上）在前言中我们介绍过，我们一般不用three.js自带的三维模型创建函数去拼凑我们想要的三维模型，而是使用...
【转】利用 three.js 开发微信小游戏的尝试
前言这是一次利用 three.js 开发微信小游戏的尝试，并不能算作是教程，只能算是一篇笔记吧。微信 WeChat 6.6.1 开始引入了微信小游戏，初期上线了一批质量相当不错的小游戏。我在查阅各处的文章时候，发现其中有几款是基于 three.js 开发的，目前火爆朋友圈的《跳一跳》就是其中之一。这...
three.js 对象绕任意轴旋转--模拟门转动
说了几篇的数学方法，这篇放松一下，郭先生说说绕任意轴转动。说一说其中一种方法，也是比较容易理解的一种，它的原理就是将子对象放到一个盒子中，然后改变子对象相对于父对象...
使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课
智慧灯杆、三维智慧灯杆、3D灯杆、3D定位、三维室内定位、3d建筑,3d消防,消防演习模拟,3d库房,3d档案室,3d密集架...
【带着canvas去流浪（14）】Three.js中凹浮雕模型的生成方式
示例代码托管在：http://www.github.com/dashnowords/blogs博客园地址：《大史住在大前端》原创博文目录华为云社区地址：【你要的前端...
Three.js 开发机房（三）
Three.js画房子的墙的详解 之前三节都没涉及到机房，只是一些零零散散的知识点，这一节我们就开始正式画外墙。首先我...
WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道本例的运行结果如图：时空隧道demo演示Demo地址：https://nsytsqdtn.github.io/demo/sprite/tunnelthree.js的粒子系统three.js的粒子系统主要是依靠精灵体来创建的，要实现thre...
THREE.JS开发《我的世界》（一）
使用THREE.JS实现网页版我的世界 大学时一直很喜欢玩minecraft这一款游戏，毕业之后便没有太多的时间玩游戏...
three.js 绘制3d地图
通过地图数据配合three可以做出非常酷炫的地图，在大数据展示中十分常见。这篇郭先生就来说说使用three.js几何体制作3D地图。在线案例点击原文地址。地图的数据是各个地图块的点数组，通过THREE.ExtrudeGeometry方法挤压出地图的版块，然后通过THREE.Line方法画出地图的分割...
系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览
一：一个最简单的静态DEMO//body加载完后触发init()//WebGL的渲染是需要HTML5 Canvas元素的，你可以手动在HTML的<body>部分中定义Canvas元素，或者让Three.js帮你生成。这两种选择一般没有多大差别，我们在此手动在HTML中定义：<bod...
Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!
继续玩味之前写的音乐频谱作品，将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现，这样就打造出了一个全立体感的频谱效果了。项目详情及源码项目GitHub地址：https://github.com/Wayou/3D_Audio_Spectrum_VIsualizer/tree...
three.js中物体旋转实践之房门的打开与关闭
看这篇博客，默认你已经知道了3D模型实现三维空间内旋转的实现方式（矩阵、欧拉角、四元数）。ok，下面正式切入主题，房门的打开和关闭，先上图：正如你所看到的那样，这个“房门”已经被打开了。一、three.js中物体的旋转object.rotation.set(angleX,angleY,angleZ)...
分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试，所以一直没有更新我的博客，今天刚把我的期末作业完成了，心情澎湃，所以晚上不管怎么样，我也要写一篇博客纪念一下我上课都没有听，还是通过强大的度娘完成了我的作业的经历。（当然作业不是百度来的，我只是百度了一些示例代码的意思，怎么用！算了，越解释万一越黑呢！哈哈O(∩_∩)O哈哈...
Three.js 入门指南(核心对象)
推荐大家可以看看这个：http://wenku.baidu.com/link?url=RQU2exzV_EF3GATc3bzQU2o9LGMuCmiN5nUJth5SLG3E2TrxtBLQodJU_kZgfJjd9ljtR5XhZlHdzoHJ6kLeAF4uC9dttM1sNer60lg09gS...
【three.js详解之二】渲染器篇
【three.js详解之二】渲染器篇本篇文章将详细讲解three.js中渲染器（renderer）的设置方法。three.js文档中渲染器的分支如下：RenderersCanvasRendererDOMRendererSVGRendererWebGLRendererWebGLRenderTarget...
网页3D效果库Three.js学习[二]-了解照相机
camera上篇大致了解了three.js ，并可以创建一个简单的可动的立方体。下来我们着重了解下camera （照相机），照相机其实就是视角，就像你的眼睛。Three.js有两种不同的相机模式:直角相机(OrthographicCamera)和透视相机(PerspectiveCamera),最好的...
three.js光源
在Threejs中，光源用Light表示，它是所有光源的基类。它的构造函数是：THREE.Light ( hex )它有一个参数hex，接受一个16进制的颜色值。例如要定义一种红色的光源，我们可以这样来定义：Var redLight = new THREE.Light(0xFF0000);Three...