<!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. 插播一条 QQ头像无法正常显示问题

    问题背景 不知道啥什么,QQ群的头像有些显示不全直接是默认的头像.想一想最近也没做啥,怎么就出问题了. 后来想一想,大概是个人文件夹的文件出问题了 解决办法 好友头像显示问题的删除 MiscHead. ...

  2. L: Long Long Ago---二分

    L: Long Long Ago 时间限制: 1 s      内存限制: 128 MB        题目描述 今天SHIELD捕获到一段从敌方基地发出的信息里面包含一串被经过某种算法加密过的的序列 ...

  3. （转）分布式中使用Redis实现Session共享(二)

    上一篇介绍了一些redis的安装及使用步骤,本篇开始将介绍redis的实际应用场景,先从最常见的session开始,刚好也重新学习一遍session的实现原理.在阅读之前假设你已经会使用nginx+i ...

  4. ECharts-入门学习

    最近因项目需要要做图表,后台数据要以柱状图的形式展示,通过上网查找,感觉ECharts这个js控件挺不错的,下面就把入门知识搞一下. 一.下载ECharts控件. 地址:http://echarts. ...

  5. Django中管理并发操作

    上一篇我们说了,如何在Django中进行事务操作,数据的原子性操作 涉及了事务操作,我们不得不考虑的另一个问题就是:并发操作 还是那个用户转账的操作 我们使用事务操作解决的操作中途服务器宕机问题 但是 ...

  6. 【LESS系列】高级特性

    前面我已经有一篇文章是写 LESS 的基础语法的. 那么这一次我们来看一下 LESS 的高级特性. 说起高级特性,首先也必须要一提的是模式匹配. 虽然个人觉得模式匹配的实用度其实也是一般般,但在关键时 ...

  7. MYSQL的NOW和SYSDATE函数的区别

    在MySQL Performance Blog博客上看到一篇文章介绍now()和sysdate()函数. 想起很多朋友专门问在MySQL里面提供now()和sysdate()函数,都是表示取得当前时间 ...

  8. Java SE 基础知识

    常量: 常量是一种标识符,它的值在运行期间恒定不变,并且常量在程序中只能被引用,而不能被重新赋值. 常量的命名规则: 1.在 Java 中,在变量声明中加入 final 关键字代表常量,加入 stat ...

  9. 哪些网站需要HTTPS(SSL证书)

    很多站长似乎不了解https站点是怎么回事,这就要从传统站点说起:传统的站点的http超文本传输协议,采用明文传输模式,存在着大量的灰色中 间环节,明文信息在中间代理服务器.路由器.wifi热点.通信 ...

  10. 【转】NuGet学习笔记

    关于NuGet园子里已经有不少介绍及使用经验,本文仅作为自己研究学习NuGet一个记录. 初次认识NuGet是在去年把项目升级为MVC3的时候,当时看到工具菜单多一项Library Package M ...