官网3DBanner效果three.js+vue实现最近没什么事，写了一个3DBanner效果，给广大前端同行们分享下。在线3D体验地址1：http://www.webgl3d.cn/3D/banner1/index.html在线3D体验地址2：http://www.webgl3d.cn/3D/banner3/index.html【视频展示】https://www.bilibili.com/video/BV1Ci4y1e7XX/?share_source=copy_web&vd_source=026f0cd0b145ec9bc2c005d9eaf67b0b官网3DBanner大部分官网的Ban
效果：代码：标准设备坐标系：three.jsCanvas画布具有一个标准设备坐标系，该坐标系的坐标原点是在canvas画布的中间位置，x轴水平向右，y轴竖直向上，标准设备坐标系的坐标值不是绝对值，是相对值，范围是[-1,1],也就是说canvas画布上任何一个位置的坐标，如果用标准设备坐标取衡量，那么坐标的所有值都在-1和1之间；屏幕坐标转为标准设备坐标：//坐标转化公式addEventListener('click',function(event){constpx=event.offsetX;constpy=event.offsetY;//屏幕坐标px、py转标准设备坐标x、y//width
喜欢做动画的我很早之前就已经开始关注Threejs这个框架了，觉得这个框架老酷炫了，可以在浏览器中展示一个3D场景，奈何时间与精力关系(主要是懒)一直都没有真正花功夫去学，好在最近终于开始简单学了一点Threejs的皮毛，并且写了个安卓机器人的小demo，涉及到的知识点是一些简单的几何模型的使用，有兴趣的就来一起看下吧。创建React项目Threejs可以用在不同项目中，可以用纯js写，也可以用Vue来写，我这里使用的是React+ts，第一步咱先来创建个项目，使用cra创建等待一段时间的项目初始化之后，在vscode中打开这个叫robot的工程，然后在终端里面分别执行以下命令第一个命令是安装
效果：代码：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";exportdefault{data(){return{sphereGeometry:null,group:null,camera:null,mesh:null,renderer:null,requestAnimationFrame_time:null,B:null,lengthVal:0,normalizeVal:null,css3DRenderer:null,};},mounted
上文WEB3D技术three.js基础网格材质演示几何体贴图ao贴图效果我们简单构建了一个贴图和ao贴图的几何体材质我们接下来来看一下透明度贴图我们还是官网搜索MeshBasicMaterial然后是我们的alphaMap属性这里黑色为完全透明白色完全不透明黑白之间还有灰色这个灰色的灰值就是透明度这里我们直接用alphaMap上贴图这样图形就明显有些透明效果了但是会上面也说了他会开始转变为黑白灰色然后是我们的光照贴图我们这里加一下然后我们图片的光照效果就会在内部微微的显现出我们设置的public/background.jpg然后我们来看环境贴图这里我们需要一个HDR图片如果没有可以下载我的资源
给场景中的模型加上广告牌描述，可以在模型的MESH里添加Sprite，配上相应的文字，描述Sprite的位置则是在mesh中的相对位置，比如模型高10，那么我们可以给一个y等于10来进行适配，这样在移动模型mesh网格时可以整体移动。functioncreateBox(data){ constgeometry=newTHREE.BoxGeometry(data.width,data.height,data.length) varmaterial varmaterials=[] if(data.groundTexture&&data.groundTexture!=''){ consttex
经过上文WEB3D技术three.js3D贺卡(2)加入天空与水面效果我们将水面和天空的效果搭建了一下那么我们将四周点光源的效果做一下首先我们将renderer.toneMappingExposure的值改为0.1让效果看着明显一点这样整个界面就会暗下来然后我们在任意位置加入代码//添加点光源constpointLight=newTHREE.PointLight(0xff0000,100);pointLight.position.set(0.5,2.3,0);pointLight.castShadow=true;scene.add(pointLight);创建一个点光源进来整个房屋就会有一种被
场景设计器-TransformControls控制器该控制器可以指定模型进入可控制模式-如图有三种控制方式translate --移动模式rotate --旋转模式scale--缩放模式方便布局过程中快捷对模型进行摆放操作。引入方式import{TransformControls}from'three/examples/jsm/controls/TransformControls.js';使用方式 //对TransformControls的使用 this.transformControls=newTransformControls(this.camera,this.renderer.dom
需求： 在很多看房软件，例如贝壳看房、VR博物馆或者VR展厅等等，为了更加真实的展示产品或者场景的特色，通常会通过一些VR或者全景图的方式，给用户带来沉浸式的体验，给视觉上带来比较震撼的效果，再加上一些动感的音乐，仿佛让人深陷其中，无法自拔。假的，因为这些实现效果比较便宜，而且性能要求不高实现原理： 通过全景图的方式实现，其实就是在一个球体内部或者球体双面贴上全景图（下面简称全景球），让相机位于该球体的中心，当鼠标移动是，旋转相机即可；当需要漫游的时候，根据点击的点位获取下一个相机位置，并将相机移动至点击的全景球，影藏其他的全景球，显示下一个全景球；重复上面过程。怎么样，是不是很简单
上文WEB3D技术three.js3D贺卡(1)搭建基本项目环境我们简单搭了一个贺卡雏形然后我们要引入一个hdr的一个天空的效果所以我们需要在代码中导入RGBELoader//导入RGBELoaderhdr工具import{RGBELoader}from"three/examples/jsm/loaders/RGBELoader";这里大家可以选择下载我的hdr资源WEB3D技术three.js3D贺卡天空hdr资源下载好之后呢我们在外面套一个xhdr文件夹然后放进public静态资源目录下然后我们找个位置加入一下这段代码//添加背景贴图letrgbeloader=newRGBELoader(
