话不多说，请看代码：

可以拖动右上角观察变化

Document

// 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();

}

div#box{

border: none;

cursor: move;

width: 100%;

height: 100%;

background-color: #EEEEEE;

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！