three.js實(shí)現(xiàn)圍繞某物體旋轉(zhuǎn)
更新時(shí)間:2017年01月25日 09:28:32 作者:艾瑞卡
本篇文章主要介紹了three.js實(shí)現(xiàn)圍繞某物體旋轉(zhuǎn)的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來看下吧
話不多說,請看代碼:
可以拖動右上角觀察變化
<!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.設(shè)置three.js渲染器 2.設(shè)置攝像機(jī)camera 3.設(shè)置場景scene 4.設(shè)置光源light 5.設(shè)置物體object --> <script> // 1.設(shè)置three.js渲染器 var renderer; function initThree(){ width = document.getElementById("box").clientWidth; height = document.getElementById("box").clientHeight; renderer = new THREE.WebGLRenderer({ antialias:true });/*生成渲染器對象(屬性:抗鋸齒效果為設(shè)置有效)*/ renderer.setSize(width,height); document.getElementById("box").appendChild(renderer.domElement); /*設(shè)置canvas背景色(clearColor)和背景色透明度(clearAlpha) */ renderer.setClearColor(0xFFFF00,1.0); } // 2.設(shè)置攝像機(jī)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}); //設(shè)置視野的中心坐標(biāo) } // 3.設(shè)置場景 var scene; function initScene(){ scene = new THREE.Scene(); } // 4.設(shè)置光源light var light; function initLight(){ light = new THREE.DirectionalLight(0xFF00FF, 1.0, 0); //平行光 light.position.set(100,100, 200); //設(shè)置光源位置 scene.add(light); //將官員添加到場景 } //5.設(shè)置物體 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})/* 設(shè)置球體的材質(zhì)*/); cubeMesh2 = new THREE.Mesh(new THREE.BoxGeometry(80,80,80),new THREE.MeshLambertMaterial({color:0xff0000})/* 設(shè)置球體的材質(zhì)*/); cubeMesh3 = new THREE.Mesh(new THREE.BoxGeometry(80,80,80),new THREE.MeshLambertMaterial({color:0xff0000})/* 設(shè)置球體的材質(zhì)*/); sphereMesh = new THREE.Mesh(new THREE.SphereGeometry(200,200,200),new THREE.MeshLambertMaterial({color:0xff00FF})/*設(shè)置球體的材質(zhì)*/); //材質(zhì)設(shè)定 sphereMesh.position.set(0,0,0); /*設(shè)置物體位置*/ cubeMesh2.position.set(400,0,0); cubeMesh.position.set(390,150,0); cubeMesh3.position.set(380,100,0); /* * 旋轉(zhuǎn)要點(diǎn)。。。 */ 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>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
echarts實(shí)現(xiàn)橫向和縱向滾動條(使用dataZoom)
這篇文章主要給大家介紹了關(guān)于echarts使用dataZoom實(shí)現(xiàn)橫向和縱向滾動條的相關(guān)資料,最近項(xiàng)目中使用到echarts圖表,當(dāng)數(shù)據(jù)過多時(shí)需要添加橫向滾動條,需要的朋友可以參考下2023-08-08javascript實(shí)現(xiàn)電腦和手機(jī)版樣式切換
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)電腦和手機(jī)版樣式切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11javascript 節(jié)點(diǎn)排序?qū)崿F(xiàn)代碼
為了讓自定義選擇選擇出的節(jié)點(diǎn)集合盡可能接近原生API選出的結(jié)果,我們往往要對結(jié)果集進(jìn)行排序,此順序當(dāng)然是從上到下,從左到右的DOM樹順序。2011-01-01JavaScript使用Broadcast?Channel實(shí)現(xiàn)前端跨標(biāo)簽頁通信
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用Broadcast?Channel實(shí)現(xiàn)前端跨標(biāo)簽頁通信,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04JS類中定義原型方法的兩種實(shí)現(xiàn)的區(qū)別
JS類中定義原型方法的兩種實(shí)現(xiàn)的區(qū)別...2007-03-03js將long日期格式轉(zhuǎn)換為標(biāo)準(zhǔn)日期格式實(shí)現(xiàn)思路
本文為大家詳細(xì)介紹下js將long日期格式轉(zhuǎn)換為標(biāo)準(zhǔn)日期格式,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04