<!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. 嵌入式C语言自我修养 05：零长度数组

    5.1 什么是零长度数组 顾名思义,零长度数组就是长度为0的数组. ANSI C 标准规定:定义一个数组时,数组的长度必须是一个常数,即数组的长度在编译的时候是确定的.在ANSI C 中定义一个数组的 ...

  2. linux如何安装和启动mongdb

    1.下载安装包 下载地址: https://www.mongodb.com/dr/fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.9.tgz/dow ...

  3. js继承（自备水，这非常干货）

    讲js继承之前,想一想什么是继承? 生活中有很多例子,比方说继承财产,继承女朋友的前男友的前女友 ヽ(ー_ー)ノ ,这些和js继承差不多,但是有一个不一样的地方,就是继承过后,原先的人就没有了,js继 ...

  4. CountDownLatch、CyclicBarrier和 Semaphore

    在java 1.5中,提供了一些非常有用的辅助类来帮助我们进行并发编程,比如CountDownLatch,CyclicBarrier和Semaphore,今天我们就来学习一下这三个辅助类的用法. 以下 ...

  5. MySQL数据库的账户管理

    账户管理 在生产环境下操作数据库时,绝对不可以使用root账户连接,而是创建特定的账户,授予这个账户特定的操作权限,然后连接进行操作,主要的操作就是数据的crud MySQL账户体系:根据账户所具有的 ...

  6. Wi-Fi科普讲稿

    Wi-Fi 从入门到?? 组员:deleted 什么是Wi-Fi Wi-Fi 在中文里又称作"无线热点",是Wi-Fi联盟制造商的商标做为产品的品牌认证,是一个创建于IEEE 80 ...

  7. Struts2 漏洞系列之S2-001分析

    0x00 前言   最近在学习java的相关漏洞,所以Struts2的漏洞自然是绕不开的.为了更好的理解漏洞原理,计划把Struts2所有的漏洞自己都做一个复现.并且自己去实现相关的POC.相关的环境 ...

  8. 四、OE 中添加对供应商名称的唯一限制

    最初的思路是利用sql_constraints 来限制重复的供应商名称,但后来想到在OE中供应商.客户乃至员工都隶属于Partner,sql_constrainst实际上是通过限制partner来限制 ...

  9. 【chrome】设置chrome允许WebGL从本地载入资源

    找到chrome安装路径,然后创建一个快捷方式,右击该快捷方式,在 目标 输入框中加上-allow-file-access-from-files(前面加个空格),通过该快捷方式打开chrome就可以通 ...

  10. Java二进制兼容性原理

    一.概述 现在的软件越来越依赖于不同厂商.作者开发的共享组件,组件管理也变得越来越重要.在这方面,一个极其重要的问题是类的不同版本的二进制兼容性,即一个类改变时,新版的类是否可以直接替换原来的类,却不 ...