[置顶] three.js 画一个旋转的立方体
2017-11-19 13:49
246 查看
试想一下,如果我们的周围的事物都是静止的,那将是多么无聊的一个世界;同样的,我们创建出的场景如果是静止的,只能满足我们一时的视觉体验,时间一长会让我们感觉到枯燥无聊,所以要营造好的视觉体验和享受,就必须让场景动起来,这样才能给我们以震撼的效果。接下来做一个旋转的立方体实例。在此之前有一个问题:
无论学WebGL还是Three.js,为什么人们总爱拿立方体做文章,或者从画立方体开始?我自己总结的有以下几点原因:
(1)立方体拓扑结构简单,顶点数少,方便绘制
(2)很多的场景贴图都会用到立方体,例如天空盒
(3)天空盒又是创建大型场景贴图或场景视觉导航必不可少的神器
基于以上三点,我也是从死磕立方体开始的,
。
首先必须先创建一个立方体,这个可以参考我另一片博客:点击打开链接,里面有几种基本几何的创建示例。立方体创建好之后,就要让它动起来,那怎样让其旋转起来呢?要旋转首先必须绕一根目标轴旋转,这里我们选择绕X、Y、Z轴旋转,其次要考虑旋转的速度,为什么会发生旋转这个过程?这里举一个例子,大家小时候可能玩过一个游戏,你会拉着小伙伴的手,然后站在原地转起来,这里你就是目标轴,当你给定一个旋转速度,你的小伙伴也会跟着你转起来,当你停下,你的小伙伴也就停下,上边有可能举得不太恰当(ps:有时候也会把小伙伴甩出去
),那这个过程的代码实现就是:
这里我给立方体设置的旋转速度为0.02。
旋转速度设置好之后,就要让场景动起来,three.js有一个专门让场景动起来的动画函数:
有了以上两点之后,就可以正式构建一个动画场景啦,先来看看最终的实现效果(忽略图片上面的网址,是用录制屏幕的软件生成的水印,这个软件叫:Bandicam,很好用,推荐给大家):
代码实现部分:
无论学WebGL还是Three.js,为什么人们总爱拿立方体做文章,或者从画立方体开始?我自己总结的有以下几点原因:
(1)立方体拓扑结构简单,顶点数少,方便绘制
(2)很多的场景贴图都会用到立方体,例如天空盒
(3)天空盒又是创建大型场景贴图或场景视觉导航必不可少的神器
基于以上三点,我也是从死磕立方体开始的,
。
首先必须先创建一个立方体,这个可以参考我另一片博客:点击打开链接,里面有几种基本几何的创建示例。立方体创建好之后,就要让它动起来,那怎样让其旋转起来呢?要旋转首先必须绕一根目标轴旋转,这里我们选择绕X、Y、Z轴旋转,其次要考虑旋转的速度,为什么会发生旋转这个过程?这里举一个例子,大家小时候可能玩过一个游戏,你会拉着小伙伴的手,然后站在原地转起来,这里你就是目标轴,当你给定一个旋转速度,你的小伙伴也会跟着你转起来,当你停下,你的小伙伴也就停下,上边有可能举得不太恰当(ps:有时候也会把小伙伴甩出去
),那这个过程的代码实现就是:
cubeMesh.rotation.x += 0.02; cubeMesh.rotation.y += 0.02; cubeMesh.rotation.z += 0.02;
这里我给立方体设置的旋转速度为0.02。
旋转速度设置好之后,就要让场景动起来,three.js有一个专门让场景动起来的动画函数:
requestAnimationFrame();//括号里面是你动画所在部分,一般是渲染函数
有了以上两点之后,就可以正式构建一个动画场景啦,先来看看最终的实现效果(忽略图片上面的网址,是用录制屏幕的软件生成的水印,这个软件叫:Bandicam,很好用,推荐给大家):
代码实现部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>threejs-rotating-cube</title>
<style>
body{
font-family: Monospace;
background: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="build/three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript">
//检测webgl的支持情况
if(!Detector.webgl) {Detector.addGetWebGLMessage();}
var container;
var scene, camera, renderer;
var cubeMesh;
main();
render();
function main(){
//添加一个div元素
container = document.createElement('div');
document.body.appendChild(container);
scene = new THREE.Scene();//创建新场景
//添加一个透视相机
camera = new THREE.PerspectiveCamera(30,
window.innerWidth/window.innerHeight, 1, 1000);
camera.position.set(100, 300, 100);//设置相机位置
camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点
//渲染
//antialias:true增加抗锯齿效果
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor(new THREE.Color(0x000000));//设置窗口背景颜色为黑
renderer.setSize(window.innerWidth, window.innerHeight);//设置窗口尺寸
//将renderer关联到container,这个过程类似于获取canvas元素
container.appendChild(renderer.domElement);
//给场景添加光源
//自然光
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.add( ambientLight );
//平行光源
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
scene.add( directionalLight );
cube();
}
//创建一个立方体
function cube(){
var cubeGeo = new THREE.CubeGeometry(40, 40, 40, 8, 8, 8);//创建立方体
var cubeMat = new THREE.MeshLambertMaterial({//创建材料
color:0xFF6600,
wireframe:false
});
cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型
cubeMesh.position.set(0, 0, 0);//设置立方体的坐标
scene.add(cubeMesh);//将立方体添加到场景中
}
function render(){
//让立方体动起来
cubeMesh.rotation.x += 0.02; cubeMesh.rotation.y += 0.02; cubeMesh.rotation.z += 0.02;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
</script>
</body>
</html>
相关文章推荐
- [置顶] 用webgl绘制一个彩色旋转立方体
- iOS编程——Swift实现一个3D可旋转的立方体(可做菜单页)
- dx11学习笔记-4、用DX画一个旋转的立方体
- 在PC环境下用OPENGL做一个不断旋转和由小到大变化的五彩立方体
- [置顶] three.js基础几何体:立方体,球,圆柱的绘制
- Directx11学习笔记【十二】 画一个旋转的彩色立方体
- Android中3D技术基础详解 ---制作一个可旋转的立方体
- iOS 利用OpenGLES画一个带多重纹理的旋转的立方体
- 一个旋转立方体和以立方体为目标的旋转相机
- 一个旋转立方体和以立方体为目标的旋转相机
- [置顶] 从零开始打造一个Android 3D立体旋转容器
- Android 实现一个立方体旋转效果
- 43 WebGL绘制一个自动旋转的立方体盒子,点击获取点击位置颜色
- 平移向量:将一个具有n个元素的一维向量向左旋转i个位置
- 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个排好序的数组的一个旋转,输出旋转数组的最小元素。
- MFC上如何绘制一个可以旋转的椭圆
- 给定一个列表,将列表向右旋转k个位置,其中k是非负数。
- 判断一个点是否在旋转过任意角度的矩形内
- Unity 向量围绕一个轴旋转 求新向量
- 一个字符旋转的算法