Three.js Example 注解 —— canvas_ascii_effect.html
【摘要】
本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有兴趣的可以一起来完善，这个为Three.js的Example进行注解，方便...
本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有兴趣的可以一起来完善，这个为Three.js的Example进行注解，方便初学者阅读
three.js 官网 Example 地址：https://threejs.org/examples/
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - ASCII Effect</title>
<meta charset="utf-8">
<!--
如果没有设置viewport的width的话，网页很可能会超出手机屏幕宽度，具体多宽，要看浏览器定义的默认宽度是多少
user-scalable=no，规定了用户不能缩放网页，但有些浏览器对该项支持不是很好，故需要设置minimum-scale和maximum-scale相同来限制用户缩放
-->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<!-- 轨迹控制，鼠标左键旋转，右键平移，中键缩放 -->
<script src="js/controls/TrackballControls.js"></script>
<!-- ASCII文本画效果 -->
<script src="js/effects/AsciiEffect.js"></script>
<!--
想要使用CanvasRenderer，必须添加如下两个js文件
Projector.js顾名思义上将3d图像投影到Canvas("2d")上，如果没有该文件会报如下错误
THREE.Projector has been moved to /examples/js/renderers/Projector.js. three.js:42883:3
TypeError: THREE.RenderableVertex is not a constructor
-->
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>
<!--
统计插件(FPS，渲染时间，chrome内存使用率)，min表示js代码经过压缩
-->
<script src="js/libs/stats.min.js"></script>
<script>
var container, stats;
var camera, controls, scene, renderer;
var sphere, plane;
//Date.now()得到的是当前时间戳，单位毫秒
var start = Date.now();
init();
animate();
function init() {
//这里的或是为了防止获取不到的情形，其实并无必要
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
/*
relative的div：width默认是window.innerWidth
absolute的div：width默认是内容大小
*/
info.style.width = '100%';
info.style.textAlign = 'center';
info.textContent = 'Drag to change the view';
//info.innerHTML = 'Drag to change the view';
container.appendChild( info );
/*
透视相机
PerspectiveCamera(fov, aspect, near, far)
fov(视场)：从相机位置能够看到的部分场景。推荐默认值45
aspect(长宽比)：渲染结果输出区域的横向长度和纵向长度的比值。推荐默认值window.innerWidth/window.innerHeight
near(近面)：定义从距离相机多近的地方开始渲染场景。推荐默认值0.1
far(远面)：定义相机可以从它所处的位置看多远。默认值1000
*/
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
//定义相机的位置，有如下两种方式。如果不设置的话，相机位置为默认的Vector3{x:0,y:0,z:0}
//camera.position.set(0,150,500);
camera.position.y = 150;
camera.position.z = 500;
//设置鼠标控制的对象为相机
controls = new THREE.TrackballControls( camera );
scene = new THREE.Scene();
/*
点光源，空间中的一点，朝所有方向发射光线
PointLight( color, intensity, distance, decay );
color：光的颜色
intensity：光照强度，默认为1
distance：光最长能照射的距离，默认为0
decay：光的衰减系数，默认为1
*/
var light = new THREE.PointLight( 0xffffff );
//设置点光源的位置
light.position.set( 500, 500, 500 );
scene.add( light );
var light = new THREE.PointLight( 0xffffff, 0.25 );
light.position.set( - 500, - 500, - 500 );
scene.add( light );
sphere = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 10 ), new THREE.MeshLambertMaterial() );
//没有设置position，默认是{x:0,y:0,z:0}
scene.add( sphere );
// Plane
/*
MeshBasicMaterial：与光照无关，仅根据材质的颜色或贴图来渲染物体
color：材质的颜色
map：材质的贴图
wireframe: 显示三角形线框还是显示面
side：可选的值有THREE.FrontSide(仅渲染正面)、THREE.BackSide(仅渲染背面)、THREE.DoubleSide(双面渲染)
overdraw:过渡描绘。如果用THREE.CanvasRenderer对象，有缝隙时需设置该值。例如当前如果使用0.5以下的值，三角形的分界线就很明显。但是使用WebGLRenderer则不会有分割线
*/
plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
plane.position.y = - 200;
plane.rotation.x = - Math.PI / 2;
scene.add( plane );
renderer = new THREE.CanvasRenderer();
//设置渲染器的"清除色"和"透明度"
renderer.setClearColor( 0xf0f0f0 );
//设置待渲染场景的大小
renderer.setSize( width, height );
// container.appendChild( renderer.domElement );
//使用renderer初始化Ascii效果
effect = new THREE.AsciiEffect( renderer );
//设置需要ASCII渲染场景的大小，如果不设置则不会渲染出任何图像，如果设置的比renderer的小(或大)则会进行缩放(或放大)
effect.setSize( width, height );
container.appendChild( effect.domElement );
//如果不适用AsciiEffect，则直接将renderer的domElement元素加入布局即可
//container.appendChild( renderer.domElement );
//统计插件(FPS，渲染时间，chrome内存使用率)
stats = new Stats();
//这里注意，统计插件的dom元素是"dom"，而不是domElement
container.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
//更新透视相机的宽高比。如果宽高比不对，那么正方形可能就不是正方形了
camera.aspect = window.innerWidth / window.innerHeight;
//更新透视相机的投影矩阵
camera.updateProjectionMatrix();
//重新设置渲染场景的大小
renderer.setSize( window.innerWidth, window.innerHeight );
effect.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
//这里可以在render前后使用stats.begin和stats.end，也可以在每次渲染的时候调用一次stats.update
stats.begin();
render();
stats.end();
}
function render() {
//计算从开始到现在一共经过了多少毫秒
var timer = Date.now() - start;
sphere.position.y = Math.abs( Math.sin( timer * 0.002 ) ) * 150;
//按照右手螺旋定则绕X轴旋转
//sphere.rotation.x = timer * 0.0003;
sphere.rotateX(timer * 0.0003);
//按照右手螺旋定则绕Z轴旋转
//sphere.rotation.z = timer * 0.0002;
sphere.rotateZ(timer * 0.0002);
//更新轨迹控制器，这里轨迹控制器与相机关联，所以也会更新相机的位置和角度。注意这里就不用设置相机的lookAt了
controls.update();
effect.render( scene, camera );
//renderer.render( scene, camera );
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
文章来源: blog.csdn.net，作者：福州-司马懿，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/chy555chy/article/details/104858078
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）