Three.js
下载 three.js
https://threejs.org/build/three.min.js
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=utf-8>
- <title>
- My first three.js app
- </title>
- <style>
- body { margin: 0; } canvas { width: 100%; height: 100% }
- </style>
- </head>
- <body>
- <script src="js/three.js">
- </script>
- <script>
- // 代码放在这里
- </script>
- </body>
- </html>
创建一个场景
为了使用 three.js 显示东西,需要 3 样东西:
scene:场景,所有物体的容器
camera:摄像机。Three.js 有很多种相机,例:
THREE.PerspectiveCamera: 透视相机
renderer:渲染器。渲染器决定了渲染的结果应该画在哪里,以怎样的方式绘制。renderer 的 domElement 属性,表示渲染器中的画布,所有的渲染都是画在 domElement 上的;document.body.appendChild(renderer.domElement); 这里的 appendChild 表示将这个 domElement 挂接在 body 下面。
一个完整的示例:
- <html>
- <head>
- <title>
- My first three.js app
- </title>
- <style>
- body { margin: 0; } canvas { width: 100%; height: 100% }
- </style>
- </head>
- <body>
- <script src="js/three.min.js">
- </script>
- <script>
- var scene = new THREE.Scene(); //创建场景 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); //创建摄像机,第一个参数 var renderer = new THREE.webGLRenderer(); //创建渲染器 renderer.setSize( window.innerWidth, window.innerHeight ); //设置渲染器的大小为窗口的内部 document.body.appendChild( renderer.domElement ); //下面是添加物体到场景里 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //一个盒子,也可以使用CubeGeometry,这里使用width,height,depth三个参数 var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; //这里的渲染是实时渲染,不停的对画面进行渲染 var render= function () { requestAnimationFrame( render ); //让浏览器云执行一次render cube.rotation.x += 0.1; cube.rotation.y += 0.1; //渲染 renderer.render(scene, camera); }; render();
- </script>
- </body>
- </html>
显示结果:
下面一段代码对函数进行分解:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- Three框架
- </title>
- <script src="js/three.min.js" data-ke-src="js/three.min.js">
- </script>
- <style type="text/CSS">
- div#canvas-frame { border: none; cursor: pointer; width: 100%; height:
- 600px; background-color: #EEEEEE; }
- </style>
- <script>
- var renderer, width, height;
- function initThree() {
- width = document.getElementById('canvas-frame').clientWidth;
- height = document.getElementById('canvas-frame').clientHeight;
- renderer = new THREE.WebGLRenderer({
- antialias: true
- });
- renderer.setSize(width, height);
- document.getElementById('canvas-frame').appendChild(renderer.domElement);
- renderer.setClearColor(0xFFFFFF, 1.0);
- }
- var camera;
- function initCamera() {
- camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
- camera.position.x = 0;
- camera.position.y = 1000;
- camera.position.z = 0;
- camera.up.x = 0;
- camera.up.y = 0;
- camera.up.z = 1;
- camera.lookAt({
- x: 0,
- y: 0,
- z: 0
- });
- }
- var scene;
- function initScene() {
- scene = new THREE.Scene();
- }
- var light;
- function initLight() {
- light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
- light.position.set(100, 100, 200);
- scene.add(light);
- }
- var cube;
- function initObject() {
- var geometry = new THREE.Geometry();
- var material = new THREE.LineBasicMaterial({
- vertexColors: THREE.VertexColors
- });
- var color1 = new THREE.Color(0x444444),
- color2 = new THREE.Color(0xFF0000); // 线的材质可以由2点的颜色决定 var p1 = new THREE.Vector3(-100, 0, 100); var p2 = new THREE.Vector3(100, 0, -100); geometry.vertices.push(p1); geometry.vertices.push(p2); geometry.colors.push(color1, color2); var line = new THREE.Line(geometry, material, THREE.LinePieces); scene.add(line); } function render() { renderer.clear(); renderer.render(scene, camera); requestAnimationFrame(render); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); render(); }
- </script>
- </head>
- <body onload="threeStart();">
- <div id="canvas-frame">
- </div>
- </body>
- </html>
THREE
THREE 是一个 three.js 对象,它代表 three.js 引擎本身。
THREE.REVISION 查看版本
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: