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 οnlοad="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在浏览器渲染的一个基本的操作过程。本人也是初学者希望对大家有帮助,那里不正确,希望大家共同学习哈。。。
效果图如下:(不过没有动画效果)