Three.js实现的网站页面金字塔模型显示

首先就是引入three.js，https://github.com/mrdoob/three.js/下载最新的代码，编译好的three.min.js在build下

<script type="text/javascript" src="three.min.js"></script>

添加事件需要引入RayCaster的js

         window.onload=function(){initTwModel();}var dom_intersected,dom_oriColor;function initTwModel(){//Paramsvar layerNum=5;//层数var layerHeight=30;//层高var layerGaps=5;//间隔var areaNum=4;//面数var WIDTH = 400,HEIGHT = 300;var VIEW_ANGLE = 24,//25ASPECT = WIDTH / HEIGHT,NEAR = 0.1,FAR = 10000;/* 初始化 */var scene = new THREE.Scene();var  renderer = new THREE.WebGLRenderer({ alpha: true , antialias: true});renderer.shadowMapType=THREE.PCFSoftShadowMap;renderer.setSize(WIDTH , HEIGHT);document.getElementById("mainCvshd").appendChild(renderer.domElement);/* 灯光 */var ambientLight=new THREE.AmbientLight("#050505");scene.add(ambientLight);var spotLight=new THREE.SpotLight(0xffffff);spotLight.position.set(100,300,400);spotLight.castShadow=true;scene.add(spotLight);/*相机*/var  camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); camera.position.set(0,80, 600);//(0,0, 600)camera.rotation.x=-0.3;//-0.2scene.add(camera);/* 显示对象 */var verlen,cbarr=[];for(var i=0;i<layerNum;i++){var oriy=i*(-layerHeight-layerGaps);var lenxa=Math.abs(oriy);var lenxb=Math.abs(-oriy+layerHeight);var cylinder = new THREE.CylinderGeometry(lenxa,lenxb,layerHeight,areaNum,1,false,0,Math.PI*2);var material = new THREE.MeshLambertMaterial({color:getRenderColoe(i)});var mesh = new THREE.Mesh(cylinder,material);mesh.position.set(0,oriy,0);mesh.rotation.set(0,-8,0);mesh.castShadow=true;scene.add(mesh);//if(i==0)cbarr.push(mesh);}/*init animation*/if(cbarr.length>0){(function anime(){for(var j=0;j<cbarr.length;j++){cbarr[j].rotation.y += 0.01;}renderer.render(scene, camera);return requestAnimationFrame(anime);})()}//init Eventsvar raycaster = new THREE.RayCaster();var mouse = new THREE.Vector2();renderer.domElement.addEventListener("mousemove",mousemove);function mousemove(e){mouse.x = (e.clientX-12) / renderer.domElement.clientWidth*2-1;mouse.y = -((e.clientY-12) / renderer.domElement.clientHeight*2)+1;raycaster.setFromCamera(mouse,camera);var intersects = raycaster.intersectObjects(scene.children);var ndom_intersected,ndom_oriColor;if(intersects.length){ndom_intersected = intersects[0].object;ndom_oriColor = ndom_intersected.material.color.getHex();ndom_intersected.material.color.set(0xfffafa);if(dom_intersected!=ndom_intersected){if(dom_intersected)dom_intersected.material.color.set(dom_oriColor);dom_intersected=ndom_intersected;dom_oriColor=ndom_oriColor;}}else{if(dom_intersected){dom_intersected.material.color.set(dom_oriColor);dom_intersected=null;}}}//init texts}function getRenderColoe(ind){var renderColors=[0xFFFF00,0xFE6161,0x92D050,0x00B0F0,0xFFFFCC,0xE2C6FD];if(ind<renderColors.length) return renderColors[ind];return renderColors[ind%renderColors.length];}

完整的测试代码：https://pan.baidu.com/s/1eSOZwh8

Three.js实现的网站页面金字塔模型显示相关推荐

dark-mode.min.js一款网站页面暗黑模式插件
dark-mode.min.js一款网站页面暗黑模式插件 https://github.com/jakejarvis/dark-mode 这是GitHub开源地址教程开始: dark-mode.mi ...
爬取网站页面与浏览器显示不一致
欲爬取网页链接 scrapy爬虫爬取该页面时的响应如下: 而此时,测试使用requests.get获得网页源代码长度如下: 此网站其他页面也出现上述问题,我按照浏览器的显示情况,用xpath定位的元素 ...
seo网站优化的金字塔模型
我相信很多学习SEO的朋友都曾经看到过SEO金字塔模型,肯定也了解了SEO金字塔包含的细致工作.但是随着搜索引擎的不断发展,尤其在国内百度算法频频更新的情况下,我们如果仍然按照最初的意思去做SEO的话 ...
用户金字塔模型详解及在实际运营工作中的意义
我这次分享的主题是讲用户金字塔,这个主题我大概是国内最早提出的. 我觉得这个概念比较实际一些,对大家平时的工作有帮助,所以今天我会讲的比较细一些. 关于我的个人经历(简述) 前面我先讲一下我的个人经历 ...
1、Three.js 实现元宇宙汽车 3D 模型(网络)
Three.js 实现元宇宙汽车 3D 模型技术采用three.js+React实现. Step1:创建一个React项目 create-react-app your-app Step2:加载thr ...
iframe嵌套其它网站页面详解
iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm" ...
为网站页面添加live2D小猫猫
live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发,通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像. live2d官方提供了很多平台的SDK),包括 ...
提高网站页面收录的几个方法返回列表发新帖回复
首先是清楚网站总体有多少页面. 可以用xenu扫描出所有的页面. 1.html地图网页数量不是太多,可以用网站地图来增加收录,分成几个地图页面. 2.随机文章模块在不影响用户体验的情况下,在栏目中 ...
网页优化中，网站页面结构该注意什么？
网站页面结构即网页内容布局,网站页面结构的创建就是要对网页的内容进行规划布局,合理的网站页面结构总是很受搜索引擎蜘蛛的欢迎,网站页面结构也能直接影响页面的用户体验及相关性,还能影响网站整体结构及页面被 ...

Three.js实现的网站页面金字塔模型显示

Three.js实现的网站页面金字塔模型显示相关推荐

最新文章

热门文章