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

2019-11-19 17:47:20

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

可以拖动右上角观察变化

<!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>

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

上一篇：angular forEach方法遍历源码解读

下一篇：基于Marquee.js插件实现的跑马灯效果示例