three.js实现围绕某物体旋转


Posted in Javascript onJanuary 25, 2017

话不多说,请看代码:

可以拖动右上角观察变化

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
javascript实现表单验证
Jan 29 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 #Javascript
angular和BootStrap3实现购物车功能
Jan 25 #Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 #Javascript
谈谈JavaScript数组常用方法总结
Jan 24 #Javascript
js实现日历的简单算法
Jan 24 #Javascript
JSON键值对序列化和反序列化解析
Jan 24 #Javascript
js自制图片放大镜功能
Jan 24 #Javascript
You might like
joomla数据库操作示例代码
2016/01/06 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
javascript每日必学之循环
2016/02/19 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
Js apply方法详解
2017/02/16 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
vue实现购物车的监听
2020/04/20 Javascript
React实现全选功能
2020/08/25 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python类定义和类继承详解
2015/05/08 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Django中使用Celery的方法示例
2018/11/29 Python
Python 移动光标位置的方法
2019/01/20 Python
python中Mako库实例用法
2020/12/31 Python
python lambda的使用详解
2021/02/26 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
大学社团计划书
2014/05/01 职场文书
应急管理培训方案
2014/06/12 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
行政处罚告知书
2015/07/01 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL