<!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. 设计简单登录界面（Java web）

    程序设计思想: 在Input.jsp中创建一个表格里边分别是课程名称,任课老师,教学地点,并分别用三个文本框来接受输入的三个属性, 并传到另外的Jsp页面中,又来接受三个数据,并判断传来的教师,与教室 ...

  2. iOS 时区获取问题

    时区缩写 UTC, CST, GMT, CEST 以及转换 UTC是协调世界时(Universal Time Coordinated)英文缩写,是由国际无线电咨询委员会规定和推荐,并由国际时间局(BI ...

  3. QuantLib 金融计算——基本组件之 DateGeneration 类

    目录 QuantLib 金融计算--基本组件之 DateGeneration 类 QuantLib 金融计算--基本组件之 DateGeneration 类 许多产品的估值依赖于对未来现金流的分析,因 ...

  4. STL项目-学校演讲比赛

    // 学校演讲比赛.cpp : 此文件包含 "main" 函数.程序执行将在此处开始并结束. // #include "pch.h" #include < ...

  5. SpringBoot 整合 中国移动 MAS HTTP1.0 实现短信发送服务

    因为客户需要,本身使用的 阿里云的短信服务改为了中国移动MAS HTTP 1.0  短信通知,因为看到网络上关于此类的博客知识很少,再趟完坑后特地写下这篇博客,提醒后来人. 特别感谢 中国移动MAS ...

  6. Github使用笔记

    ========================Github使用===================概念解释:远程仓库Remote:就是指保存在github网站里的代码;本地仓库Repository ...

  7. hiho# 1465 重复旋律8 循环串计数 后缀自动机

    题目传送门 题意:给出一个母串,再给出n个串,问对于每个串,母串中有几个子串是可以通过循环变化得到这个串. 思路:对母串建SAM,求出$right$集. 把匹配串复制一遍,和母串进行匹配,当匹配长度大 ...

  8. 在Windows Server 2008 R2(x64)上安装.NET Framework 4.5 兼谈.NET Framework 4.0 “在服务器核心角色上不受支持”含义

    完成了一个服务器文件监控系统,该系统的核心是一个Windows服务,需要安装在服务器上.由于是Visual Studio 2012开发,为了保证开发的Windows服务可以运行,必须在Windows服 ...

  9. python的socket.recv函数陷阱

    目录 前言 一个粘包实验 执行结果 排错思路 解决和总结 前言 惯例练习历史实验,在编写tcp数据流粘包实验的时候,发现一个奇怪的现象.当远程执行的命令返回结果很短的时候可以正常执行,但返回结果很长时 ...

  10. 2018最新win10 安装tensorflow1.4（GPU/CPU）+cuda8.0+cudnn8.0-v6 + keras 安装CUDA失败 导入tensorflow失败报错问题解决

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9747019.html 基本开发环境搭建 1. Microsoft Windows 版本 关于W ...