未加星标

[webGL学习]基于three.js构建WebGL实例第四讲

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

[webGL学习]基于three.js构建WebGL实例第四讲

今天我们继续我们的课程webGL 的学习,在该课程中我们将向大家展示如何给一个场景添加一个3D文字,如何设计出二维形状,把3D模型加载在OBJLoader现场。但这个过程是非常困难的.下面就具体来看一下.

HTML代码

这部分还是跟之前的一样.

<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <meta name="author" content="Script Tutorials" /> <title>WebGL With Three.js - Lesson 4 | Script Tutorials</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="js/three.min.js"></script> <script src="js/THREEx.WindowResize.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/fonts/font1.js"></script> <script src="js/OBJLoader.js"></script> <script src="js/stats.min.js"></script> <script src="js/script.js"></script> </body> </html> javascript实现

首先,我们来创建一个简单的场景(scene, camera, renderer, controls, light and ground):

// load texture var texture = THREE.ImageUtils.loadTexture('texture.png'); texture.repeat.set(0.03, 0.03); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.anisotropy = 16; texture.needsUpdate = true; var lesson4 = { scene: null, camera: null, renderer: null, container: null, controls: null, clock: null, stats: null, init: function() { // Initialization // create main scene this.scene = new THREE.Scene(); var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; // prepare camera var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 10000; this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR); this.scene.add(this.camera); this.camera.position.set(0, 400, 800); this.camera.lookAt(new THREE.Vector3(0,0,0)); // prepare renderer this.renderer = new THREE.WebGLRenderer({antialias:true, alpha: false}); this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); this.renderer.setClearColor(0xffffff); this.renderer.shadowMapEnabled = true; this.renderer.shadowMapSoft = true; // prepare container this.container = document.createElement('div'); document.body.appendChild(this.container); this.container.appendChild(this.renderer.domElement); // events THREEx.WindowResize(this.renderer, this.camera); // prepare controls (OrbitControls) this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement); this.controls.target = new THREE.Vector3(0, 0, 0); // prepare clock this.clock = new THREE.Clock(); // prepare stats this.stats = new Stats(); this.stats.domElement.style.position = 'absolute'; this.stats.domElement.style.bottom = '0px'; this.stats.domElement.style.zIndex = 10; this.container.appendChild( this.stats.domElement ); // add directional light var dLight = new THREE.DirectionalLight(0xffffff); dLight.position.set(0, 1000, 0); dLight.castShadow = true; // dLight.shadowCameraVisible = true; this.scene.add(dLight); // add simple ground var groundGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1); ground = new THREE.Mesh(groundGeometry, new THREE.MeshLambertMaterial({ color: 0x4489FE, side: THREE.DoubleSide })); ground.position.y = -20; ground.rotation.x = - Math.PI / 2; ground.receiveShadow = true; this.scene.add(ground); }, }; // Animate the scene function animate() { requestAnimationFrame(animate); render(); update(); } // Update controls and stats function update() { lesson4.controls.update(lesson4.clock.getDelta()); lesson4.stats.update(); } // Render the scene function render() { if (lesson4.renderer) { lesson4.renderer.render(lesson4.scene, lesson4.camera); } } // Initialize lesson on page load function initializeLesson() { lesson4.init(); animate(); } if (window.addEventListener) window.addEventListener('load', initializeLesson, false); else if (window.attachEvent) window.attachEvent('onload', initializeLesson); else window.onload = initializeLesson; 添加3D文本(3D text)

以显示在3D enviromnemt文本的最佳方式是使用一个就绪3D字形(对于three.js所)。一般情况下,有很多网站,你可以下载字体,但我们需要特别的JavaScript的字体(typefaced字体)。本网站可以帮助您自定义字体转换为JavaScript的字体(上传您的字体,点击“转换”,然后按照步骤,直到它让你下载的结果)。但是,在写这篇教程的时候,这个服务不可用,所以我只好用现成的字体来创建我们的演示。要绘制我准备了以下功能的三维文字:

draw3dText: function(x, y, z, text) { // prepare text geometry var textGeometry = new THREE.TextGeometry(text, { size: 60, // Font size height: 20, // Font height (depth) font: 'droid serif', // Font family weight: 'bold', // Font weight style: 'normal', // Font style curveSegments: 1, // Amount of curve segments bevelThickness: 5, // Bevel thickness bevelSize: 5, // Bevel size bevelEnabled: true, // Enable/Disable the bevel material: 0, // Main material extrudeMaterial: 1 // Side (extrude) material }); // prepare two materials var materialFront = new THREE.MeshPhongMaterial({ map: texture, color: 0xffff00, emissive: 0x888888 }); var materialSide = new THREE.MeshPhongMaterial({ map: texture, color: 0xff00ff, emissive: 0x444444 }); // create mesh object var textMaterial = new THREE.MeshFaceMaterial([ materialFront, materialSide ]); var textMesh = new THREE.Mesh(textGeometry, textMaterial); textMesh.castShadow = true; // place the mesh in the certain position, rotate it and add to the scene textMesh.position.set(x, y, z); textMesh.rotation.x = -0.3; this.scene.add(textMesh); } ExtrudeGeometry

这个类允许我们从二维路径形状打造立体几何一个3d效果。下面连看今天的演示:

drawCustomObject: function(x, y, z) { // prepare points for custom shape (ship) var objectPoints = [ new THREE.Vector2 (275, 265), new THREE.Vector2 (205, 240), new THREE.Vector2 (125, 220), new THREE.Vector2 (274, 115), new THREE.Vector2 (275, 85), new THREE.Vector2 (330, 85), new THREE.Vector2 (310, 100), new THREE.Vector2 (330, 115), new THREE.Vector2 (275, 115), new THREE.Vector2 (274, 266), new THREE.Vector2 (305, 266), new THREE.Vector2 (305, 240), new THREE.Vector2 (360, 240), new THREE.Vector2 (360, 285), new THREE.Vector2 (340, 335), new THREE.Vector2 (215, 335), new THREE.Vector2 (175, 320), new THREE.Vector2 (150, 290), new THREE.Vector2 (75, 230), new THREE.Vector2 (200, 264), new THREE.Vector2 (274, 264), ]; // prepare shape var objectShape = new THREE.Shape(objectPoints); var extrusionSettings = { amount: 20, curveSegments: 1, // Amount of curve segments bevelThickness: 5, // Bevel thickness bevelSize: 5, // Bevel size bevelEnabled: true, // Enable/Disable the bevel material: 0, // Main material extrudeMaterial: 1 // Side (extrude) material }; // prepare ship geometry var objectGeometry = new THREE.ExtrudeGeometry( objectShape, extrusionSettings ); // prepare two materials var materialFront = new THREE.MeshPhongMaterial({ map: texture, color: 0xffff00, emissive: 0x888888 }); var materialSide = new THREE.MeshPhongMaterial({ map: texture, color: 0xff00ff, emissive: 0x444444 }); // create mesh object of the ship var objectMaterial = new THREE.MeshFaceMaterial([ materialFront, materialSide ]); var objectMesh = new THREE.Mesh( objectGeometry, objectMaterial ); objectMesh.castShadow = true; // place the object in the certain position, rotate it and add to the scene objectMesh.position.set(x, y, z); objectMesh.rotation.x = Math.PI; this.scene.add(objectMesh); } OBJLoader

我留下了最有趣的结束 - 加载准备OBJ车型。有现成三维物体的数量庞大(在不同的网站)的事实,你可以添加到您的场景,并three.js所赋予我们通过使用OBJLoader这个类:

loadObjFile: function(x, y, z) { // prepare new OBJLoader and load the 'legoBrick.obj' model var loader = new THREE.OBJLoader(); loader.load('legoBrick.obj', function(object) { // apply custom material for all children var legoMat = new THREE.MeshLambertMaterial({ color: 0x008800 }); object.traverse( function (child) { if (child instanceof THREE.Mesh) { child.material = legoMat; child.material.needsUpdate = true; } }); // place the object in the certain position, rotate, scale and add to the scene object.position.x = x; object.position.y = y; object.position.z = z; object.rotation.y = Math.PI/2; object.scale.set(40, 40, 40); lesson4.scene.add(object); }); } 结束

未完继续

源码下载请关注我的微信公众号


[webGL学习]基于three.js构建WebGL实例第四讲

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: WebGLJava360JavaScriptHTML微信
分页:12
转载请注明
本文标题:[webGL学习]基于three.js构建WebGL实例第四讲
本站链接:http://www.codesec.net/view/480848.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(63)