场景（scene）
场景是所有物体的容器
var scene = new THREE.Scene();
相机（camera）
"相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。"
(1)透视相机（THREE.PerspectiveCamera）
透视投影照相机获得的结果是类似人眼在真实世界中看到物体
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
- fov 视景体竖直方向上的张角（是角度制而非弧度制）
- aspect 照相机水平方向和竖直方向长度的比值，通常设为所在Canvas的横纵比例
- near和far分别是照相机到视景体 最近、最远的距离，均为正值，近大远小
(2)正交投影照相机（THREE.OrthographicCamera）
正交投影照相机获得的结果就像三维物体在一块面板上画出的来的立体抽象平面图
// right-left / top-bottom = canvas.width/canvas.height
var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far) // left right top bottom near far
相机位置
设置函数
//初始化相机 45°视角 最近距离 0.1 最远10000
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
//相机位置设置
camera.position.set(0,1000,0);
//相机方向 Three.js中的坐标系使用的是右手系 即默认值 通俗一点就是哪个坐标值为1哪个轴就为最上面的 （0，0，1）即为普通坐标系z轴竖直
camera.up.set(0,1,0)
//相机望向原点
camera.lookAt(0, 0, 0)
渲染器（renderer）
渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制
//渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
相机控制器
可以配合坐标系直观的感受在浏览器里面3维效果，直接操作坐标系的动态变化
//使用时需要额外引入 <script src="./js/OrbitControls.js"></script>
new THREE.OrbitControls(camera,renderer.domElement)
可视化的三维坐标系
RGB （red，green，blue）分别代表xyz，这个只是其中的一种坐标系，除此之外还有网格坐标系等
var axesHelper = new THREE.AxesHelper( 10000 );
//在场景中要添加
scene.add( axesHelper);
一个小demo，在一个场景中画一条线
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 800px;
background-color: white;
}
</style>
<script src="./js/three.js"></script>
<!-- 常用相机控制器，依赖文件目录 three.js\examples\js\controls -->
<script src="./js/OrbitControls.js"></script>
</head>
<body>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
<script>
var axesHelper;
var renderer;
var scene;
var camera;
var orbitcontrols;
init();
function init(){
//init axesHelper 初始化坐标系
axesHelper = new THREE.AxesHelper( 10000 );
axesHelper.position.y = -5;
// init renderer 初始化渲染器
let width = document.getElementById('canvas-frame').clientWidth;
let height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
// init scene 初始化场景
scene = new THREE.Scene();
scene.background = new THREE.Color(0XFFFFFF);
scene.add( axesHelper);
//init camera 初始化相机
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.set(0,1000,0);
camera.up.set(0,1,0)
camera.lookAt(0, 0, 0)
//init orbitcontrols; 初始化相机控制器
orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
orbitcontrols.rotateSpeed = -0.25;
initObject() ;
}
function initObject() {
//几何体
var geometry = new THREE.Geometry();
//第一个点坐标添加到geometry对象
geometry.vertices.push( new THREE.Vector3( -500, 0, 0 ) );
//第二个点坐标添加到geometry对象
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
//线的位置 在z轴负方向100位置处
line.position.z = -100;
scene.add( line );
}
function threeStart() {
renderer.clear();
requestAnimationFrame( threeStart );
orbitcontrols.update(); // required when damping is enabled
renderer.render( scene, camera );
}
</script>
</body>
</html>
演示
注意：RGB（xyz的方向）图中黑色的线就是画出来的线
评论区