話不多說，請看代碼：
可以拖動右上角觀察變化
<!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>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持VeVb武林網！
新聞熱點
疑難解答
