three.js学习之——入门案例
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在浏览器渲染的一个基本的操作过程。本人也是初学者希望对大家有帮助，那里不正确，希望大家共同学习哈。。。
效果图如下：(不过没有动画效果)