three.js实现围绕某物体旋转
话不多说，请看代码：
可以拖动右上角观察变化
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
Three.js快速入门教程
引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,
-
Three.js利用顶点绘制立方体的方法详解
前言 之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置,法向量,绘制下标什么的.虽然复杂,但是毕竟原生,性能没得说. three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型,下面话不多说了,来一起看看详细的介绍吧. 下面是我的个人一个案例. 首先,我创建了一个空白的形状: //立方体 var cubeGeometry = new THREE.Geometry(); 立方体的形状如下: // 创建一个立方体 // v6----- v5 // /| /| // v1----
-
Three.js基础部分学习
一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件 <场景 A scene.相机a camera.渲染器 a renderer 三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the
-
three.js快速入门【推荐】
Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie
-
Three.js源码阅读笔记(物体是如何组织的)
这是Three.js源码阅读笔记第三篇.之前两篇主要是关于核心对象的,这些核心对象主要围绕着矢量vector3对象和矩阵matrix4对象展开的,关注的是空间中的单个顶点的位置和变化.这一篇将主要讨论Three.js中的物体是如何组织的:即如何将顶点.表面.材质组合成为一个具体的对象. Object::Mesh 该构造函数构造了一个空间中的物体.之所以叫"网格"是因为,实际上具有体积的物体基本都是建模成为"网格"的. 复制代码 代码如下: THREE.Mesh =
-
Three.js实现绘制字体模型示例代码
前言 本文主要给大家介绍了关于利用Three.js绘制字体模型的相关内容,使用three.js绘制字体模型,没有想象当中那么难.下面话不多说了,来一起看看详细的介绍: 首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载,在加载成功的回调函数里面进行创建网格. 然后通过THREE.TextBufferGeometry或者THREE.TextGeometry方法进行网格创建,并将需要设置的问题传入. 再设置一个纹理,通过THREE.Mesh()函数创建成图形添加
-
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/t
-
touch.js 拖动、缩放、旋转 （鼠标手势）功能代码
可以实现手势操作:拖动.缩放.旋转.封装好的脚本方法是这样的: var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVal: 1, //缩放 rotateVal: 0, //旋转 curStatus: 0, //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转 //初始化 init: function ($targetObj, callback) { touch.on($targetObj, 'touchsta
-
JS运动改变单物体透明度的方法分析
本文实例讲述了JS运动改变单物体透明度的方法.分享给大家供大家参考,具体如下: 除了通过改变物体的 宽,高,letf,top位置或者是运动方向来实现物体运动效果之外,改变物体的透明度,也是运动特效 <script> window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmousemove = function () { startMove(100); } oDiv.onmouseout
-
Unity3D实现物体旋转缩放移动效果
本文实例为大家分享了Unity3D实现物体旋转缩放移动的具体代码,供大家参考,具体内容如下 由于项目运行在安卓上,运用到了插件,比较麻烦.你们可以在触发条件上进行修改,不用插件也可以. 1.下载FingerGestures 插件 下载地址 点击打开链接 2.导入插件,创建场景 将预设Finger Gestures Initializer 拖拽到 Hierarchy 视图中 3.添加脚本,拖拽到摄像机上.创建一个方块拖拽到脚本target 属性上. using UnityEngine; using
-
JS实现简单的操作杆旋转示例详解
目录 一.实现效果 二.组成部分 目标 三.代码实现 1.操作控制 2.dom对象操作类 3.用法 总结与思考 一.实现效果 JS 简单的操作杆旋转实现 首先说明一下,请直接忽略背景图,这里主要实现的是杆旋转控制方向盘旋转. 鼠标移出控制区域,控制球复位 二.组成部分 创建 ballOption.js 文件,用以绑定控制球指定 dom,并初始化相关操作 创建 eleOption.js 文件,用以实现一些频繁的 dom 操作 主要是通过鼠标滑动事件控制“控制球”位置更改及获取以屏幕上方向为0度的角
-
three.js利用gpu选取物体并计算交点位置的方法示例
光线投射法 使用three.js自带的光线投射器(Raycaster)选取物体非常简单,代码如下所示: var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove(event) { // 计算鼠标所在位置的设备坐标 // 三个坐标分量都是-1到1 mouse.x = event.clientX / window.innerWidth * 2 - 1; mouse.y =
-
js实现图片360度旋转
大致介绍 这次是一个简单的效果,就是思路的问题 效果: 思路 旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转 由于效果是根据鼠标的移动距离来操作的,即移动的像素值.如果按照默认的情况,移动鼠标的时候图片就旋转的太快了,所以我们要给鼠标移动的距离处以15,降低图片的旋转速度. var l = parseInt(-x/15); 有一个问题是在鼠标向左移动的时候,移动的距离是负的.要想正确的显示图片,就要对负值进行处理.例如-1,图片要显示最后一张即72张(图片一
-
js CSS3实现卡牌旋转切换效果
我们经常会在游戏里看到一些几张卡牌左右切换的效果,中间的一张最突出醒目,向左或向右滑动可切换到另一张,今天我们就用CSS3来实现下这种效果. 我们先来看个demo,具体的样式各位可以自己调整: (PC下可点击按钮切换,移动端可左右滑动切换) 从效果上我们可以看到,这5个div可以左右的切换,每次切换时总会有一个在中间显眼的位置进行展示.在切换时,看起来是div进行了移动,进行了DOM的增删操作.但是如果审查下元素,就能看到,DOM元素没有变换位置,它依然在那个位置,我们只是切换了每个元素上的cl
-
three.js 入门案例详解
最近公司需要用tree.js实现一个3D图的显示,就看了官方文档,正好有时间,就记录下来. 由于我们公司的前端框架用的是angular,所以我就把我的treejs封装在一个directives里面.后面放源码 首先我们要知道three.js的下载地址它的地址是: https://github.com/mrdoob/three.js. 其次,什么是three.js? three.js的几个步骤: 1:引入three.js文件(打开调试窗口,并在Console下输入 THREE.REVISION命令
-
微信小游戏之使用three.js 绘制一个旋转的三角形
three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样.接下来就记录一下在小游戏中绘制一个 旋转的三角形的步骤: 一. 初始化项目 下载微信官方的开发者工具,然后新建项目 appid选择测试号即可,项目路径自行指定 用编辑器打开项目,得到如下目录: 然后除了game.js,game.json, project.config.json全部删除,并把game.js中的内容清空. game.js是