<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			body {

				margin: 0;

				overflow: hidden;

				/* 隐藏body窗口区域滚动条 */

			}

		</style>

		<!--引入three.js三维引擎-->

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

		<!-- 引入threejs扩展控件OrbitControls.js -->

		<script src="../../three.js-master/examples/js/controls/OrbitControls.js"></script>

	</head>

	<body>

		<script>

			/**

			 * 创建场景对象Scene

			 */

			var scene = new THREE.Scene();

			let geometry3 = new THREE.PlaneGeometry(100, 100);

			let material3 = new THREE.MeshBasicMaterial({

				color: 0x00ff00,

				//side: THREE.DoubleSide

			});

			let rect = new THREE.Mesh(geometry3, material3);

			rect.rotateX(Math.PI/2); //x轴旋转90度

			scene.updateMatrixWorld(true);

			var worldPosition = new THREE.Vector3();

			rect.getWorldPosition(worldPosition)

			console.log('原始顶点坐标',rect.geometry.vertices);

			rect.geometry.vertices.forEach(el=>{

				var vector = el.clone();

				vector.applyMatrix4( rect.matrixWorld );

				console.log('旋转后的顶点世界坐标',vector);

			});

			scene.add(rect);

console.log(rect.toJSON());

			// 			// 辅助坐标系   老版本AxisHelper 新版本AxesHelper

			var axisHelper = new THREE.AxisHelper(250);

			scene.add(axisHelper);

			/**

			 * 光源设置

			 */

			//点光源

			// var point = new THREE.PointLight(0xffffff);

			// point.position.set(400, 200, 300); //点光源位置

			// scene.add(point); //点光源添加到场景中

			// //环境光

			// var ambient = new THREE.AmbientLight(0x444444);

			// scene.add(ambient);

			/**

			 * 相机设置

			 */

			var width = window.innerWidth; //窗口宽度

			var height = window.innerHeight; //窗口高度

			var k = width / height; //窗口宽高比

			var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大

			//创建相机对象

			var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

			camera.position.set(200, 300, 200); //设置相机位置

			camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

			/**

			 * 创建渲染器对象

			 */

			var renderer = new THREE.WebGLRenderer();

			renderer.setSize(width, height); //设置渲染区域尺寸

			renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

			document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

			// 渲染函数

			function render() {

				renderer.render(scene, camera); //执行渲染操作

			}

			render();

			//创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性

			var controls = new THREE.OrbitControls(camera);

			//监听鼠标事件，触发渲染函数，更新canvas画布渲染效果

			controls.addEventListener('change', render);

		</script>

	</body>

</html>

　　参考:

http://www.yanhuangxueyuan.com/Three.js_course/first.html

http://techbrood.com/zh/news/webgl/three_js-%E5%AF%B9%E8%B1%A1%E5%B1%80%E9%83%A8%E5%9D%90%E6%A0%87%E8%BD%AC%E6%8D%A2%E4%B8%BA%E4%B8%96%E7%95%8C%E5%9D%90%E6%A0%87.html

From:https://www.cnblogs.com/xuejianxiyang/p/9706789.html

ThreeJS geometry的顶点世界坐标的更多相关文章

  1. threejs三角形Geometry的顶点时针顺序会导致三角形看不见

    var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75,winSize.width/winSize.hei ...

  2. osg shader 相机观察矩阵逆矩阵 求顶点世界坐标

    uniform mat4 osg_ViewMatrixInverse;//osg内置uniform void main() { vec4 posWorld = osg_ViewMatrixInvers ...

  3. NodeVisitor的使用-遍历Geode节点下的Geometry并获取顶点、法向量等数据

    struct Subset { std::vector<float> vertexs;//位置 std::vector<float> normals;//法向 std::vec ...

  4. ThreeJs 基础入门

    本文来自网易云社区 作者:唐钊 Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它在 web 中创建各种三维场景,包括了摄影机.光影.材质等各种对象.使用它可以让我们更加直观的了解 we ...

  5. threejs 初识

    用于展示3D动效,就是 跟拍电影一样,需要有3大模块:scene,camera,renderer. scene:场景,用于放置用到的模型. camera:摄像机,拍电影似的,得有个摄像机. rende ...

  6. WebGL模型拾取——射线法

    今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型.首先我们来了解一下为什么要做模型拾取,我们在做webgl场景交互的时候经常要选中场景中的某个模型,比如鼠标拖拽旋转, ...

  7. WebGL射线拾取模型——八叉树优化

    经过前面2篇WebGL射线拾取模型的文章,相信大家对射线和模型面片相交的原理已经有所了解,那么今天我们再深入探究关于射线拾取的一个问题,那就是遍历场景中的所有与射线相交的模型的优化问题.首先我们来复习 ...

  8. three.js 入门详解(一)

    1. 概述 1.1 什么是WebGL? WebGL是在浏览器中实现三维效果的一套规范 想要使用WebGL原生的API来写3D效果的话,很吃力.three.js是WebGL的一个开源框架,它省去了很多麻 ...

  9. 解读Unity中的CG编写Shader系列十 （光滑的镜面反射(冯氏着色)）

    前文完成了最基本的镜面反射着色器,单平行光源下的逐顶点着色(per-vertex lighting),又称为古罗着色(Gouraud shading).这篇文章作为后续讨论更光滑的镜面反射方式,逐像素 ...

随机推荐

  1. IOS----UIScrollerView的使用

    刚刚遛狗回来,前段时间创建的这篇博客一直没有填充内容,今天把scrollerview正好整理一下. 1.scrollerview的主要作用:当界面显示不开要显示的内容,scrollerview提供了滑 ...

  2. 队列的理解和实现(二) ----- 链队列(java实现)

    什么是链队列 链队是指采用链式存储结构实现的队列,通常链队用单链表俩表示.一个链队显然需要两个分别指示队头和队尾的指针,也称为头指针和尾指针,有了这两个指针才能唯一的确定. package 链队列; ...

  3. 2018南京网络赛 - Skr 回文树

    题意:求本质不同的回文串(大整数)的数字和 由回文树的性质可知贡献只在首次进入某个新节点时产生 那么只需由pos和len算出距离把左边右边删掉再算好base重复\(O(n)\)次即可 位移那段写的略微 ...

  4. CentOS 7下安装RabbitMQ

    下载erlang:http://www.erlang.org/downloads ,otp_src_20.3.tar.gz 下载RabbitMQ: http://www.rabbitmq.com ,r ...

  5. 关于微信企业号操作api的sdk封装 （.net）

    做微信的第三方开发业半年多了 现在献上微信企业号的操作sdk(包括源码) 本人水平有限 望大家多提意见 下载地址献上:下载

  6. (转)如何在CentOS / RHEL 7上安装Elasticsearch，Logstash和Kibana（ELK）

    原文:https://www.howtoing.com/install-elasticsearch-logstash-and-kibana-elk-stack-on-centos-rhel-7 如果你 ...

  7. Paths

    Paths 在javax.tools.StandardLocation 枚举类下定义了几个枚举变量,如下: public enum StandardLocation implements Locati ...

  8. oracle获得日期与向oracle表中插入Date字符串原理解析

    工作中要用到 Oracle 9i,经常要向其中的某张表插入事件发生的日期及时间.专门就 Oracle 的日期及时间显示方式和插入方式记一笔. 像 Number,varchar2 等内置的数据类型一样, ...

  9. PTA (Advanced Level) 1023 Have Fun with Numbers

    Have Fun with Numbers Notice that the number 123456789 is a 9-digit number consisting exactly the nu ...

  10. PTA (Advanced Level) 1012 The Best Rank

    The Best Rank To evaluate the performance of our first year CS majored students, we consider their g ...