three.js学习之——入门案例

sungang_1120

浏览: 323642 次
性别:
来自: 成都

最近访客更多访客>>

bxl994

eplang

zhongzunfa

sdyjmc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

three.js

three.js html5

1,首先我们应该知道 three.js是做什么的？

hree.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

说白了，他就是基于WebGL 规范的一个可以直接在浏览器呈现3D效果的一个第三方类库，类似于Javascript的Jquery插件。

下面我们通过一个简单的入门事例来具体说明一下通过three.js在浏览器上呈现一个3D效果的基本流程。

创建之前：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lesson1</title>
<script type="text/javascript" src="../js/threeJs/three.min.js"></script>
<style type="text/css">
div#canvas-frame {
	border: none;
	cursor: move;
	width: 1400px;
	height: 600px;
	background-color: #EEEEEE;
}
</style>
</head>
<body onload="threeStart();">
<!--盛放canvas的容器-->
<div id="canvas3d"></div>
</body>

我们需要几个基本步骤：

真正能够显示有three.js,我们需要三件事:一个场景,一个相机,一个渲染器,所以我们可以用摄像机渲染场景。

创建一个场景：

var width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
var height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高

//创建一个场景
var scene = new THREE.Scene();
//创建Three相机 three.js提供了 有几种不同的摄像机 这里使用的是THREE.PerspectiveCamera
// 参数说明 : 
//1,视野
//2,长宽比
//接下来的两个属性是远近剪裁平面。
//意味着什么,是物体远离相机比远比附近或接近的价值不会呈现。
//你现在不需要担心这个,但是你可能想要使用其他值在你的游戏来获得更好的性能。
//var camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

//渲染器  除了WebGLRenderer我们用在这里  three.js提供了其他
var renderer = new THREE.WebGLRenderer(); 
//renderer.setSize(width, height); //指定渲染器的高宽（和画布框大小一致）
renderer.setSize(window.innerWidth, window.innerHeight)
//document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
//renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
renderer.setSize(window.innerWidth, window.innerHeight)


//要创建一个多维数据集,我们需要一个CubeGeometry。
//这是一个对象,其中包含所有的点(顶点)和填充(面临)的多维数据集
var geometry = new THREE.CubeGeometry(1,1,1); 
//除了CubeGeometry,我们需要一个材料颜色
//three.js附带一些材料,但目前我们将使用MeshBasicMaterial
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
//第三件事,我们需要的是一个Mesh。Mesh是一个对象,
//参数是一个CubeGeometry、材料(material ), 
var cube = new THREE.Mesh(geometry, material); 
//然后我们可以插入到我们的场景中,
scene.add(cube); 
//默认情况下,当我们调用scene.add(),
//我们将添加到坐标(0,0,0)。这将导致相机和cube。为了避免这种情况,我们只是将镜头移出一点。
camera.position.z = 5; 


//渲染场景
//呈现
var render = function () { 
	requestAnimationFrame(render); 
	//旋转
	cube.rotation.x += 0.1; 
	cube.rotation.y += 0.1; 
			
	renderer.render(scene, camera); 
}; 
render();

以上就是一个简单的three.js在浏览器渲染的一个基本的操作过程。本人也是初学者希望对大家有帮助，那里不正确，希望大家共同学习哈。。。

效果图如下：(不过没有动画效果)