|
網(wǎng)頁里面顯示文字，太簡單了。但是如果要顯示3D效果文字，懵逼了吧。 看three.js強大威力!! <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <script src="../build/three.js" type="text/javascript"></script> </head> <body> <script type="text/javascript" > var scene,camera,render; var loader = new THREE.FontLoader(); //導(dǎo)入字體，設(shè)定字體，這里的話，你們找對自己的字體路徑，可能和我的不一樣的！！下載的three.js包里面examples/fonts里面有字體 loader.load('../examples/fonts/helvetiker_bold.typeface.json',function(font){ init(font); animate(); }); function init(font){ // 老三樣 場景scene，相機camera，渲染器render scene=new THREE.Scene(); // 相機 camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000); camera.position.set(0,10,500); // 渲染器 renderer=new THREE.WebGLRenderer(); //背景顏色修改一下 renderer.setClearColor( 0xf0f0f0 ); renderer.setSize(window.innerWidth,window.innerHeight); //顯示在窗體 document.body.appendChild(renderer.domElement); // 文字 var text = "text3D"; var g = new THREE.TextGeometry(text,{ // 設(shè)定文字字體， font:font, //尺寸 size:30, //厚度 height:30, }); //計算邊界，暫時不用管 g.computeBoundingBox(); //3D文字材質(zhì) var m = new THREE.MeshBasicMaterial({color:0xff0000}); var mesh = new THREE.Mesh(g,m); // 加入到場景中 scene.add(mesh); } function animate(){ requestAnimationFrame( animate ); // 渲染 renderer.render(scene,camera); } </script> </body> </html> |
|
|
