Three.js Example 注解 —— canvas_camera_orthographic2.html
2023-09-11 14:22:55 时间
本文搬自我的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 canvas - combo camera - orthographic + perspective</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;
color: purple;
}
/*
未访问 a:link {color:blue;}
已访问 a:visited {color:blue;}
鼠标悬停 a:hover {color:red;}
鼠标按下 a:active {color:yellow;}
*/
a {
color: red;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<!-- 可以在透视和正交相机上切换，默认为透视相机 -->
<script src="js/cameras/CombinedCamera.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>
<div style="position: absolute; top: 10px; width: 100%; text-align: center; ">
<a href="http://threejs.org" target="_blank">three.js</a> - Combo Camera<br>
<!--
链接的onclick事件被先执行，其次是href属性下的动作(页面跳转，或 javascript 伪链接)
假设链接中同时存在href与onclick，如果想让href属性下的动作不执行，onclick必须得到一个false的返回值。
-->
View: <a href="#" onclick="setOrthographic();return false;"> Orthographic</a> |
<a href="#" onclick="setPerspective();return false;">Perspective</a><br>
(焦距)Lens: <a href="#" onclick="setLens(12);return false;">12mm</a> |
<a href="#" onclick="setLens(16);return false;">16mm</a> |
<a href="#" onclick="setLens(24);return false;">24mm</a> |
<a href="#" onclick="setLens(35);return false;">35mm</a> |
<a href="#" onclick="setLens(50);return false;">50mm</a> |
<a href="#" onclick="setLens(60);return false;">60mm</a> |
<a href="#" onclick="setLens(85);return false;">85mm</a> |
<a href="#" onclick="setLens(105);return false;">105mm</a><br>
(视场)Fov: <a href="#" onclick="setFov(30);return false;">30°</a> |
<a href="#" onclick="setFov(50);return false;">50°</a> |
<a href="#" onclick="setFov(70);return false;">70°</a> |
<a href="#" onclick="setFov(100);return false;">100°</a><br>
(缩放)Zoom: <a href="#" onclick="camera.setZoom(0.5);return false;">0.5x</a> |
<a href="#" onclick="camera.setZoom(1);return false;">1x</a> |
<a href="#" onclick="camera.setZoom(2);return false;">2x</a> |
<br/>
Views: <a href="#" onclick="camera.toTopView();lookAtScene=false;return false;">Top view</a> |
<a href="#" onclick="camera.toBottomView();lookAtScene=false;return false;">Bottom view</a> |
<a href="#" onclick="camera.toLeftView();lookAtScene=false;return false;">Left view</a> |
<a href="#" onclick="camera.toRightView();lookAtScene=false;return false;">Right view</a> |
<a href="#" onclick="camera.toFrontView();lookAtScene=false;return false;">Front view</a> |
<a href="#" onclick="camera.toBackView();lookAtScene=false;return false;">Back view</a> |
<a href="#" onclick="lookAtScene=true;return false;">Look at Scene</a>
<br/>
<div id="fov"></div>
</div>
<script>
var container, stats;
var camera, scene, renderer;
var lookAtScene = true;
init();
animate();
//Fov(Field of View，视场)
function setFov( fov ) {
camera.setFov( fov );
document.getElementById('fov').innerHTML = 'FOV '+ fov.toFixed(2) +'°' ;
}
//焦距(Focal Length)
function setLens( lens ) {
// try adding a tween effect while changing focal length, and it'd be even cooler!
// 尝试当改变焦距时，添加一个在两者之间的效果，这不是更酷
var fov = camera.setLens( lens );
document.getElementById('fov').innerHTML = 'Converted ' + lens + 'mm lens to FOV '+ fov.toFixed(2) +'°' ;
}
//切换为正交相机
function setOrthographic() {
camera.toOrthographic();
document.getElementById('fov').innerHTML = 'Orthographic mode' ;
}
//切换为透视相机
function setPerspective() {
camera.toPerspective();
document.getElementById('fov').innerHTML = 'Perspective mode' ;
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
//透视相机的near必须在相机位置前，而正交相机的near也可以在相机之后
camera = new THREE.CombinedCamera( window.innerWidth / 2, window.innerHeight / 2, 70, 1, 1000, - 500, 1000 );
//定义相机的位置，有如下两种方式。如果不设置的话，相机位置为默认的Vector3{x:0,y:0,z:0}
//camera.position.x = 200;
//camera.position.y = 100;
//camera.position.z = 200;
camera.position.set(200,100,200)
scene = new THREE.Scene();
// Grid，绘制网格
var size = 500, step = 50;
var geometry = new THREE.Geometry();
for ( var i = - size; i <= size; i += step ) {
//从左下角到右上角，先画横线，在画竖线
//绘制与X轴平行的横线
geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
geometry.vertices.push( new THREE.Vector3( size, 0, i ) );
//绘制与Z轴平行的竖线
geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
geometry.vertices.push( new THREE.Vector3( i, 0, size ) );
}
var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
/*
THREE.Line使用WebGL中的gl.LINE_STRIP(一系列的连续直线，即折线)渲染
THREE.LineSegments使用WebGL中的gl.LINES(每一对顶点被解释为一条直线，即线段)渲染
*/
var line = new THREE.LineSegments( geometry, material );
scene.add( line );
// Cubes
var geometry = new THREE.BoxGeometry( 50, 50, 50 );
/*
MeshLambertMaterial，这种材质会考虑光照的影响，可以用来创建颜色暗淡的、不光亮的物体
color: 即diffuse，漫射颜色，默认为0xffffff，白色
ambient: 环境色，默认为0xffffff, 白色, 乘以环境光得到对象的颜色
emissive: 自发光(荧光)颜色，默认为0x000000,黑色，实体颜色，不受其他灯光的影响.
overdraw: 过渡描绘。如果用THREE.CanvasRenderer对象，有缝隙时需设置该值。例如当前如果使用0.5以下的值，三角形的分界线就很明显。但是使用WebGLRenderer则不会有分割线
morphTargets: 表示是否启用变形
*/
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } );
for ( var i = 0; i < 100; i ++ ) {
var cube = new THREE.Mesh( geometry, material );
//对Y方向上的高度进行[1,2]的缩放
cube.scale.y = Math.floor( Math.random() * 2 + 1 );
//cube.position为立方体的中心
cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
cube.position.y = ( cube.scale.y * 50 ) / 2;
cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
scene.add(cube);
}
// Lights
//环境光，提供的是在不同位置和方向上强度都相同的光源，相当于光照模型中各物体之间的反射光，因此通常用来表现光强中非常弱的那部分光
var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );
scene.add( ambientLight );
//平行光，也称作无限光，平行光光源就如同太阳，若在场景中添加了一个平行光，它可以影响场景中的所有物体，而无论平行光光源设置在任何位置。平行光的方向为它的位置指向场景中心。
var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
//normalize(): 单位化向量，使其模长为1
directionalLight.position.normalize();
scene.add( directionalLight );
var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add( directionalLight );
renderer = new THREE.CanvasRenderer();
//设置渲染器的"清除色"和"透明度"
renderer.setClearColor( 0xf0f0f0 );
//设置屏幕像素比，与Android上的DIP相仿，作用是在所有设备上的显示效果都相近
renderer.setPixelRatio( window.devicePixelRatio );
//设置待渲染场景的大小
renderer.setSize( window.innerWidth, window.innerHeight );
//将渲染器的DOM元素(即Canvas)添加到HTML中
container.appendChild( renderer.domElement );
//统计插件(FPS，渲染时间，chrome内存使用率)
stats = new Stats();
//这里注意，统计插件的dom元素是"dom"，而不是domElement
container.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
//调整透视相机"长宽比"，同时调整正交相机的"上下左右"4个面
camera.setSize( window.innerWidth, window.innerHeight );
//更新透视相机的投影矩阵
camera.updateProjectionMatrix();
//重新设置渲染场景的大小
renderer.setSize( window.innerWidth, window.innerHeight );
}
}
function animate() {
requestAnimationFrame( animate );
//这里可以在render前后使用stats.begin和stats.end，也可以在每次渲染的时候调用一次stats.update
stats.begin();
render();
stats.end();
}
function render() {
//Date.now()得到的是当前时间戳，单位毫秒
var timer = Date.now() * 0.0001;
//相机绕着场景中央，在半径200的圆周上往复运动
camera.position.x = Math.cos( timer ) * 200;
camera.position.z = Math.sin( timer ) * 200;
//调整相机视角，对着场景中央
if ( lookAtScene ) camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>
相关文章
- VSCode调试Html中的脚本 vscode前端常用插件推荐，搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
- 爬虫之JS的解析确定js的位置
- js转义和反转义html
- JS 正则中的命名捕获分组
- JS控制HTML元素的显示和隐藏
- JS实现HTML实体与字符的相互转换
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- css+html+js实现多级下拉和弹出菜单
- JS如何获取iframe内html的body值
- Three.js Example 注解 —— webgl_morphtargets.html
- Three.js Example 注解 —— webgl_geometry_cube.html
- Three.js Example 注解 —— misc_uv_tests.html
- Three.js Example 注解 —— canvas_sandbox.html
- Three.js Example 注解 —— canvas_materials_reflection.html
- Three.js Example 注解 —— canvas_materials_normal.html
- Three.js Example 注解 —— canvas_lines_colors_2d.html
- Three.js Example 注解 —— canvas_geometry_shapes.html
- Three.js Example 注解 —— canvas_geometry_panorama_fisheye.html
- Three.js Example 注解 —— canvas_geometry_earth.html