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

怼烎@ 2022-06-06 05:29 207阅读 0赞

首先就是引入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(){
    				//Params
    				var layerNum=5;//层数
    				var layerHeight=30;//层高
    				var layerGaps=5;//间隔
    				var areaNum=4;//面数
    				
    				var WIDTH = 400,HEIGHT = 300;
    				
    				var VIEW_ANGLE = 24,//25
    					ASPECT = 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.2
    				scene.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 Events
    				var 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

![SouthEast][]

[SouthEast]: /images/20220606/39dfd7244c944103b512cbb3de9298bc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 java金字塔显示_Java输出正反金字塔循环

package com.javase.demo; import java.util.Scanner; /\\ \ 金字塔 \ @author Mr.Zhang \

亦凉/ 2023年01月10日 05:22/ 0 赞/ 136 阅读

相关 threejs合并模型的几何体提高渲染速度

对 `dae` 格式的三维模型进行合并，第一个函数对模型类型分类后合并，第二个函数对同一类的模型合并，第三个函数对模型的几何体合并；使用了 `threejs` 类库和 `jQu

素颜马尾好姑娘i/ 2022年10月11日 12:16/ 0 赞/ 220 阅读

相关 threejs---同一页面多个模型之间的切换（基于vue）

使用场景： 1、由厂区外部切换到厂区内部 2、左侧切换模型，右侧进行不同模型的预览实现逻辑： 1、先清空当前scene下的所有children 2、清空

矫情吗；*/ 2022年09月12日 14:43/ 0 赞/ 882 阅读

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

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

怼烎@/ 2022年06月06日 05:29/ 0 赞/ 208 阅读

相关案例四：网站首页显示页面

参考[HTML][] 知识点笔记—表格标签案例四：网站首页显示页面 1.表格标签 <table border="" width="" height=""

不念不忘少年蓝@/ 2022年03月26日 02:06/ 0 赞/ 225 阅读

相关案例三：网站友情链接显示页面

知识点笔记—列表标签与超链接标签需求：在网站的友情链接页面显示网站的所有的友情链接. 分析：技术分析：【HTML的列表标签】  有序列表

朴灿烈づ我的快乐病毒、/ 2022年03月26日 01:18/ 0 赞/ 184 阅读

相关案例二：网站图片显示页面

知识点笔记—–图片标签 <img/>标签的 src 属性。当前目录：直接写文件名称或者./文件名称上一级目录：../文件名称下一级：

小咪咪/ 2022年03月26日 01:18/ 0 赞/ 265 阅读

相关案例一：网站信息页面的显示

1.什么是HTML？(Hyper Text Markup Language:超文本标记语言) 超文本：功能比普通文本更加强大标记语言：使用一组标签对内容

待我称王封你为后i/ 2022年03月26日 00:54/ 0 赞/ 178 阅读

相关 threejs：模型轻量化

参考链接：[https://blog.csdn.net/ALLENJIAO/article/details/80830700][https_blog.csdn.net_ALLE

ゝ一纸荒年。/ 2022年02月21日 04:23/ 0 赞/ 282 阅读

相关 threejs：实现模型爆炸效果

参考文献：[https://blog.csdn.net/qq\_30621091/article/details/84585790][https_blog.csdn.net_q

水深无声/ 2022年02月21日 03:59/ 0 赞/ 961 阅读