您的位置：首页 > Web前端 > JavaScript

three.js旋转的3D文字canvas_geometry_text

2018-03-01 10:31 525 查看

官方示例 canvas_geometry_text.html
需要注意的都写在代码中的注释里了<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js canvas - geometry - text</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<script src="build/three.js"></script>

<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>

<script src="js/libs/stats.min.js"></script>

<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>

<body onload="threeStart();">

<div id="container"></div>

<script>

var renderer,camera,scene,container,stats,
cube,group;

function threeStart(){

container = document.getElementById('container');

renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth,window.innerHeight);
container.appendChild(renderer.domElement);

//创建新的字体
var loader = new THREE.FontLoader();

loader.load('helvetiker_regular.typeface.json',function(fonts){

initCamera();
initScene();
initLight();
initObject(fonts);

animation();

});

}

//相机
function initCamera(){

camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,1000);

camera.position.set(0,150,500);

}

//场景
function initScene(){

scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);

}

function initLight(){

}

function initObject(fonts){

var geometry = new THREE.TextGeometry('hello three.js!',{
size: 80, //字号大小，一般为大写字母的高度
height: 10, //文字的厚度
weight: 'normal', //值为'normal'或'bold'，表示是否加粗
font: fonts, //字体，默认是'helvetiker'，需对应引用的字体文件
style: 'normal', //值为'normal'或'italics'，表示是否斜体
bevelThickness: 1, //倒角厚度
bevelSize: 1, //倒角宽度
curveSegments: 2,//弧线分段数，使得文字的曲线更加光滑(很吃性能)
bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
});

geometry.computeBoundingBox();////重新计算当前Geometry对象的立方体界限注意这样才有max min值
var centerOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x ) * -0.5;

var materials = [
new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
];

cube = new THREE.Mesh(geometry,materials);
cube.position.x = centerOffset;

group = new THREE.Group();//创建一个组，测试如果不加入组无法如以中心旋转而是从min位置旋转
group.add(cube);
scene.add(group);

stats = new Stats();
container.appendChild(stats.dom);

}

function animation(){

requestAnimationFrame(animation);

renderer.render(scene,camera);

stats.update();

var timer = Date.now() * 0.001;

group.rotation.y += Math.cos(THREE.Math.degToRad(timer)) * 0.05;

}

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航