欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

three.js实现围绕某物体旋转

程序员文章站 2023-09-08 15:36:54
话不多说,请看代码: 可以拖动右上角观察变化

话不多说,请看代码:

可以拖动右上角观察变化

<!doctype html>
<html lang="en" style="width: 100%; height:100%;">
<head>
 <meta charset="utf-8">
 <title>document</title>
 <script src="http://cdn.bootcss.com/three.js/r83/three.min.js"></script>
 <script src="http://cooklife.cn/html/node_modules/dat.gui/build/dat.gui.min.js"></script>
</head>
<body onload="threeexcute()" style="width: 100%; height:100%;">
 <div id="box"></div>
</body>
 <!-- three.js的核心五步就是:
 1.设置three.js渲染器
 2.设置摄像机camera
 3.设置场景scene
 4.设置光源light
 5.设置物体object 
 -->
 <script>
 // 1.设置three.js渲染器
 var renderer;
 function initthree(){
 width = document.getelementbyid("box").clientwidth;
 height = document.getelementbyid("box").clientheight;
 renderer = new three.webglrenderer({
 antialias:true
 });/*生成渲染器对象(属性:抗锯齿效果为设置有效)*/
 renderer.setsize(width,height);
 document.getelementbyid("box").appendchild(renderer.domelement);
 /*设置canvas背景色(clearcolor)和背景色透明度(clearalpha) */
 renderer.setclearcolor(0xffff00,1.0);
 }

 // 2.设置摄像机camera
 var camera;
 function initcamera(){
 camera = new three.perspectivecamera(45,width/height,1,10000);
 camera.position.x = 1000;
 camera.position.y = 1000;
 camera.position.z = 1000;
 camera.up.x = 0;
 camera.up.y = 0;
 camera.up.z = 100;
 camera.lookat({x:0,y:0,z:0}); //设置视野的中心坐标 
 }

 // 3.设置场景
 var scene;
 function initscene(){
 scene = new three.scene();
 }

 // 4.设置光源light
 var light;
 function initlight(){
 light = new three.directionallight(0xff00ff, 1.0, 0); //平行光
 light.position.set(100,100, 200); //设置光源位置
 scene.add(light); //将官员添加到场景
 }

 //5.设置物体 
 var spheremesh;
 var cubemesh;
 var cubemesh2;
 var cubemesh3;
 var cubemesh4;
 var cubemesh5;
 var cubemesh6;
 function initobject(){
 cubemesh = new three.mesh(new three.boxgeometry(80,80,80),new three.meshlambertmaterial({color:0xff0000})/*
 设置球体的材质*/);
 cubemesh2 = new three.mesh(new three.boxgeometry(80,80,80),new three.meshlambertmaterial({color:0xff0000})/*
 设置球体的材质*/);
 cubemesh3 = new three.mesh(new three.boxgeometry(80,80,80),new three.meshlambertmaterial({color:0xff0000})/*
 设置球体的材质*/);
 spheremesh = new three.mesh(new three.spheregeometry(200,200,200),new three.meshlambertmaterial({color:0xff00ff})/*设置球体的材质*/); //材质设定 
 spheremesh.position.set(0,0,0); /*设置物体位置*/ 
 cubemesh2.position.set(400,0,0); 
 cubemesh.position.set(390,150,0); 
 cubemesh3.position.set(380,100,0); 
 /*
 * 旋转要点。。。
 */
 var pivotpoint = new three.object3d();
 pivotpoint.add(cubemesh);
 pivotpoint.add(cubemesh2);
 pivotpoint.add(cubemesh3);
 spheremesh.add(pivotpoint);
 scene.add(spheremesh); 
 spheremesh.name = 'cube' 
 } 

 control = new function () {
  this.rotationspeedx = 0.001;
  this.rotationspeedy = 0.001;
  this.rotationspeedz = 0.001;
 };

 function addcontroller(){
 var gui = new dat.gui();
 gui.add(control, 'rotationspeedx', -0.2, 0.2);
  gui.add(control, 'rotationspeedy', -0.2, 0.2);
  gui.add(control, 'rotationspeedz', -0.2, 0.2);
 }

 function render(){
 renderer.render(scene, camera);
  scene.getobjectbyname('cube').rotation.x += control.rotationspeedx;
  scene.getobjectbyname('cube').rotation.y += control.rotationspeedy;
  scene.getobjectbyname('cube').rotation.z += control.rotationspeedz;

  requestanimationframe(render);
 } 
 function threeexcute(){ 
  initthree(); 
  initcamera(); 
  initscene(); 
  initlight(); 
  initobject(); 
  renderer.clear();
  addcontroller(); 
  render(); 
 } 
 </script>
 <style type="text/css">
 div#box{
  border: none;
  cursor: move;
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  }
 </style>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!