当前位置: 首页 > Web前端 > HTML

Three.js控制对象显示隐藏的方法

时间:2023-03-28 14:22:20 HTML

本文将讲解Three.js控制对象显示隐藏的方法,主要包括以下几个方法:visible属性;图层属性。下面将通过简单的例子来介绍上述方法的简单用法以及它们之间的一些区别。如无特殊说明,下面源码以r105版本为例:visible属性visible是Object3D的一个属性。只有当visible为真时,对象才会被渲染。任何继承了Object3D的对象都可以通过这个属性来控制自己的显示与否,例如:Mesh、Group、Sprite、Light等。一个简单的例子://控制单个对象的显示与隐藏constgeometry=newTHREE.PlaneGeometry(1,1)//1*1的平面constplaneMaterial=newTHREE.MeshBasicMaterial({color:0x00ff00})//红色平面constplane=newTHREE.Mesh(geometry,planeMaterial)plane.visible=false//不显示单个物体scene.add(plane)//控制一组物体的显示和隐藏constgeometry=newTHREE.PlaneGeometry(1,1)constplaneMaterial=newTHREE.MeshBasicMaterial({color:0x00ff00})constplane=newTHREE.Mesh(geometry,planeMaterial)constgroup=newTHREE.Group()group.add(plane)group.visible=false//不显示一组对象scene.add(group)可以这样从下面的例子可以看出,当我们要控制一组对象的显示和隐藏时,可以把这些对象放到一个Group中,只需要通过controlling组的显示并隐藏它。这个block的代码逻辑是在WebGLRenderer.js的projectObject方法中实现的。首先,在render方法中调用了projectObject方法:this.render=function(scene,camera){//...projectObject(scene,camera,0,_this.sortObjects);//...}projectObject方法的定义如下://注1:visible属性为false,直接返回//...varchildren=object.children;//注2:递归应用于childrenfor(vari=0,l=children.length;i