AI 助理
备案控制台
开发者社区 云计算 文章 正文

three.js 坐标系、camera位置属性、点、线、面

2019-01-16 4664
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： three.js

three.js 坐标系、camera位置属性、点、线、面

知识补充：坐标系

右手坐标系

图中右边那个手对应的坐标系，就是右手坐标系。在Threejs中，坐标和右边的坐标完全一样。x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。

线条的深入理解

在Threejs中，一条线由点，材质和颜色组成。

Threejs中没有提供单独画点的函数，它必须被放到一个THREE.Geometry形状中，这个结构中包含一个数组vertices，这个vertices就是存放无数的点的数组。这个表示可以如下图所示：

点

为了绘制一条直线，首先我们需要定义两个点，如下代码所示：

var p1 = new THREE.Vector3( -100, 0, 100);
var p2 = new THREE.Vector3( 100, 0, -100);

请大家思考一下，这两个点在坐标系的什么位置，然后我们声明一个THREE.Geometry，并把点加进入，代码如下所示：

THREE.Geometry形状

var geometry = new THREE.Geometry();
geometry.vertices.push(p1);
geometry.vertices.push(p2);

THREE.LineBasicMaterial线材质

geometry.vertices的能够使用push方法，是因为geometry.vertices是一个数组。这样geometry 中就有了2个点了。
然后我们需要给线加一种材质，可以使用专为线准备的材质，THREE.LineBasicMaterial。
最终我们通过THREE.Line绘制了一条线，如下代码所示:

var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
var line = new THREE.Line(geometry,material);

也可以写成

var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(-100, 0, 100);
  geometry.vertices.push(new THREE.Vector3(100, 0, -100);
  var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
  var color1 = new THREE.Color( 0x444444 ),
color2 = new THREE.Color( 0xFF0000 );
geometry.colors.push( color1, color2 );
  var line = new THREE.Line(geometry,material);

画坐标平面


它横竖分别绘制了20条线段，在摄像机的照射下，就形成了这般模样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
    <script src="/javascripts/three.min.js"></script>

</head>
<body>
<script>
  var renderer;
  function initThree() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0xFFFFFF, 1.0);
    document.body.appendChild( renderer.domElement );
  }
  var camera;
  function initCamera() {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 0;
    camera.position.x = 0;
    camera.position.y = 1000;
    camera.rotation.x = -89.5 ;
  }
  var scene;
  function initScene() {
    scene = new THREE.Scene();
  }
  var light;
  function initLight() {
    light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
    light.position.set(100, 100, 200);
    scene.add(light);
  }
  var cube;
  function initObject() {
    var geometry = new THREE.Geometry();
    geometry.vertices.push( new THREE.Vector3( -500, 0, 0 ) );
    geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x0000ff, opacity: 0.2 } ) );
    scene.add( line );
    for ( var i = 0; i <= 20; i ++ ) {
      var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x0000ff, opacity: 0.2 } ) );
      line.position.z = ( i * 50 ) - 500;
      scene.add( line );
      var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x0000ff, opacity: 0.2 } ) );
      line.position.x = ( i * 50 ) - 500;
      line.rotation.y = 90 * Math.PI / 180;
      scene.add( line );
    }
  }
  function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    renderer.clear();
    renderer.render(scene, camera);
  }
  threeStart();
</script>
</body>
</html>

画网格关键之处initObject函数中，我们不浪费纸，但是浪费一些电，在下面重复一下上面的代码：

var cube;
  function initObject() {
    var geometry = new THREE.Geometry();
    geometry.vertices.push( new THREE.Vector3( -500, 0, 0 ) );
    geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x0000ff, opacity: 0.2 } ) );
    scene.add( line );
    for ( var i = 0; i <= 20; i ++ ) {
      var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x0000ff, opacity: 0.2 } ) );
      line.position.z = ( i * 50 ) - 500;
      scene.add( line );
      var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x0000ff, opacity: 0.2 } ) );
      line.position.x = ( i * 50 ) - 500;
      line.rotation.y = 90 * Math.PI / 180;
      scene.add( line );
    }
  }

思路：我们要画一个网格的坐标，那么我们就应该找到线的点。把网格虚拟成正方形，在正方形边界上找到几个等分点，用这些点两两连接，就能够画出整个网格来。

1、定义2个点

在x轴上定义两个点p1(-500,0,0)，p2(500,0,0)。

geometry.vertices.push( new THREE.Vector3( -500, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

2、算法

这两个点决定了x轴上的一条线段，将这条线段复制20次，分别平行移动到z轴的不同位置，就能够形成一组平行的线段。
同理，将p1p2这条线先围绕y轴旋转90度，然后再复制20份，平行于z轴移动到不同的位置，也能形成一组平行线。
经过上面的步骤，就能够得到坐标网格了。代码如下：

for ( var i = 0; i <= 20; i ++ ) {
    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
    line.position.z = ( i * 50 ) - 500;
    scene.add( line );
    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
    line.position.x = ( i * 50 ) - 500;
    line.rotation.y = 90 * Math.PI / 180;   //  旋转90度
    scene.add( line );
}

相机camera位置属性设置up、position、lookat

看了中文文档很早之前的例子

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 1000;
                camera.position.z = 0;
                camera.up.x = 0;
                camera.up.y = 0;
                camera.up.z = 1;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });

开始很懵逼，完全不能理解，有个position，还要up和lookAt干嘛。
自己换了个方式实现

 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 0;
    camera.position.x = 0;
    camera.position.y = 1000;
    camera.rotation.x = -89.5 ;

既然是位置属性不明白，还是要端正学习态度，把它搞懂。
上坐标轴：

先来第一个position属性，可以设置xyz。
假设设置y为 1000
position(0,1000,0);
相机的位置是下图：

单独设置xz轴都和以上类似，位置z或者x轴某个位置。
那lookAt，字面上的意思就是，看向哪里。
相机默认是由正z轴看像-z轴（相机镜头对着-z轴方向拍），就是我们由屏幕外向屏幕内看一样。

camera.lookAt({//相机看向哪个坐标
                    x : 0,
                    y : 0,
                    z : 0
                });

以下为实例为 相机看向原点0,0,0。（相机位置position(500,500,1000)）

以下为不设置lookAt

因为相机的位置在x轴500上,y轴500,z轴1000。默认是看向-z轴，所以只能看到y轴500位置的线条了。
那up属性又是什么鬼，相机位置代码如下设置情况下：

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 500;//相机的位置
                camera.position.y = 500;
                camera.position.z = 1000;
//                camera.up.x = 0;//相机以哪个方向为上方
//                camera.up.y = 1;
//                camera.up.z = 0;
                camera.lookAt({//相机看向哪个坐标
                    x : 0,
                    y : 0,
                    z : 0
                });


　

一切正常。
加个up属性试试：

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 500;//相机的位置
                camera.position.y = 500;
                camera.position.z = 1000;
                camera.up.x = 0;//相机以哪个方向为上方
                camera.up.y = 0;
                camera.up.z = 1;
                camera.lookAt({//相机看向哪个坐标
                    x : 0,
                    y : 0,
                    z : 0
                });

代码设置z轴为1，表示以z轴为相机的上方。（默认y轴为上方）
就是躺着看，趴着看，侧着看的区别（我是这么认为的）
还不明白就是，手机正着拍，倒着拍，旋转拍~~~

关键词：
JavaScript属性
JavaScript坐标系
姚飞亮
目录
相关文章
代码掌控者
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
43 1
光明顶阳顶天
|
1月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中，需要通过测试和验证来确定最适合的加载方式，以提供更好的用户体验和页面性能。
光明顶阳顶天
90 56
刘志辉~
|
4月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
刘志辉~
52 1
光明顶阳顶天
|
1月前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性，可以在不影响页面渲染的情况下异步加载脚本，并确保脚本的执行顺序。在实际应用中，需要根据具体情况选择合适的加载方式，并注意处理可能出现的问题，以确保页面能够正常加载和执行。
光明顶阳顶天
24 1
神明木佑
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
神明木佑
80 4
Star时光
|
2月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
Star时光
28 1
尹正杰
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
尹正杰
33 1
JavaScript基础知识-枚举对象中的属性
神明木佑
|
2月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
神明木佑
23 0
跃@sir
|
2月前
|
缓存 JavaScript 前端开发
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
跃@sir
33 0
Star时光
|
2月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器：深入理解与实践
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器：深入理解与实践
Star时光
25 0