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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
赞 (0)