溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了利用three.js怎么編寫一個圍繞某物體旋轉效果，此處給大家介紹的非常詳細，對大家的學習或工作具有一定的參考價值，需要的朋友可以參考下：
<!DOCTYPE html> <html lang="en" > <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()" > <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 cubeMesh3; var cubeMesh4; var cubeMesh5; var cubeMesh6; var cubeMesh7; function initObject(){ cubeMesh = 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})/* 設置球體的材質*/); cubeMesh4 = 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); /*設置物體位置*/ cubeMesh3.position.set(400,0,0); cubeMesh.position.set(390,150,0); cubeMesh4.position.set(380,100,0); /* * 旋轉要點。。。 */ var pivotPoint = new THREE.Object3D(); pivotPoint.add(cubeMesh); pivotPoint.add(cubeMesh3); pivotPoint.add(cubeMesh4); 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>
到此這篇關于利用three.js怎么編寫一個圍繞某物體旋轉效果的文章就介紹到這了，更多相關的內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
