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

话不多说，请看代码：
可以拖动右上角观察变化
<！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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！