Three.js前端3D开发：使用 CSS3DRenderer 渲染全景图

作者：IT小白 | 2024-02-23 08:47:04

踩

css3drenderer

此实例主要通过使用 THREE.CSS3DRenderer 和 THREE.CSS3DObject,实现以鼠标拖曳方式在天空盒(即模拟人站在真实的空间中)中查看全景图。当浏览器显示页面时,即可使用鼠标拖曳全景图的任一部分查看其他部分,效果分别如图所示。

主要代码如下:


<html><head> <meta charset="UTF-8">
 <script src="ThreeJS/three.js"></script>
 <script src="ThreeJS/jquery.js"></script>
 <script src="ThreeJS/CSS3DRenderer.js"></script>
</head>
<body><center id="myContainer"></center>
<script>
 //创建渲染器
 var myRenderer=new THREE.CSS3DRenderer();
 myRenderer.setSize(window.innerWidth,window.innerHeight);
 $('#myContainer')[0].appendChild(myRenderer.domElement);
 var myCamera=new THREE.PerspectiveCamera(75,
     window.innerWidth/window.innerHeight,1,1000);
 var myScene=new THREE.Scene();
 var myTarget=new THREE.Vector3();
 var myLongitude=90, myLatitude=0;
 var myPhi=0, myTheta=0;
 //设置天空盒六个面(模拟真实空间)的纹理图像路径、旋转角度、所在位置
 var myImages=[
  {url:'images/img155.jpg',position:[-512,0,0],rotation:[0,Math.PI/2,0]},
  {url:'images/img154.jpg',position:[512,0,0],rotation:[0,-Math.PI/2,0]},
  {url:'images/img156.jpg',position:[0,512,0],rotation:[Math.PI/2,0,Math.PI]},
  {url:'images/img152.jpg',position:[0,-512,0],
   rotation:[-Math.PI/2,0,Math.PI]},
  {url:'images/img153.jpg',position:[0,0,512],rotation:[0,Math.PI,0]},
  {url:'images/img151.jpg',position:[0,0,-512],rotation:[0,0,0]}];
 for(var i=0; i<myImages.length;i++){
  var myImage=myImages[i];
  //动态创建img元素，并设置其宽度和图像路径
  var myElement=document.createElement('img');
  myElement.width=1026;
  myElement.src=myImage.url;
  //根据位置和角度创建CSS3DObject，即天空盒
  var myCSS3DObject=new THREE.CSS3DObject(myElement);
  myCSS3DObject.position.fromArray(myImage.position);
  myCSS3DObject.rotation.fromArray(myImage.rotation);
  myScene.add(myCSS3DObject);
 }
 //渲染天空盒
 animate();
 function animate(){
  requestAnimationFrame(animate);
  myLatitude=Math.max(-85,Math.min(85,myLatitude));
  myPhi=THREE.MathUtils.degToRad(90-myLatitude);
  myTheta=THREE.MathUtils.degToRad(myLongitude);
  myTarget.x=Math.sin(myPhi)*Math.cos(myTheta);
  myTarget.y=Math.cos(myPhi);
  myTarget.z=Math.sin(myPhi)*Math.sin(myTheta);
  myCamera.lookAt(myTarget);
  myRenderer.render(myScene,myCamera);
 }
 //添加鼠标事件监听器
 document.addEventListener('mousedown', function(e){
  e.preventDefault();
  document.addEventListener('mousemove',onMouseMove,false);
  document.addEventListener('mouseup',onMouseUp,false);
 },false);
 document.addEventListener('wheel',function(event){
  var myFOV=myCamera.fov+event.deltaY*0.05;
  myCamera.fov=THREE.MathUtils.clamp(myFOV,10,75);
  myCamera.updateProjectionMatrix();
 },false);
 function onMouseMove(event){
  myLongitude-=event.movementX*0.1;
  myLatitude+=event.movementY*0.1;
 }
 function onMouseUp(){
  document.removeEventListener('mousemove',onMouseMove);
  document.removeEventListener('mouseup',onMouseUp);
 }
</script></body></html>

在上面这段代码中,myCSS3DObject= new THREE.CSS3DObject(myElement)语句用于将DOM元素转换为三维对象,然后即可控制该三维对象的 position 和 rotation 属性实现移动和旋转当使用THREE.CSS3DObject 时,通常需要使用THREE.CSS3DRenderer 语句创建染器,而不能使用THREE.WebGLRenderer 语句创建染器。此外需要注意:此实例需要添加 CSS3DRenderer.js文件。

如需完整实例的源文件，请下载！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/135147