<!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)

    如果图中存在环(回路),那么该图不存在拓扑排序,在这里我们讨论的都是无环的有向图. 什么是拓扑排序 一个例子 对于一部电影的制作过程,我们可以看成是一个项目工程.所有的工程都可以分为若干个" ...

  2. 47.ActiveMQ集群

    (声明:本文非EamonSec原创) 使用ZooKeeper实现的Master-Slave实现方式,是对ActiveMQ进行高可用的一种有效的解决方案,高可用的原理:使用ZooKeeper(集群)注册 ...

  3. 架构师养成记--24.linux常用命令

    一.Linux 文件 根据上文Linux 文件说明1.文件的rwx    d开头表示文件夹,    -开头的表示文件,    l开头表示链接文件    r:read,w:write,x:execute ...

  4. golang使用etcd实现分布式锁

    package main import ( "context" "fmt" "time" "go.etcd.io/etcd/cli ...

  5. 使用二叉搜索树实现一个简单的Map

    之前看了刘新宇大大的<算法新解>有了点收获,闲来无事,便写了一个二叉搜索树实现的Map类. java的Map接口有很多不想要的方法,自己定义了一个 public interface IMa ...

  6. 【性能调优】：记录一次数据库sql语句性能调优过程

    一,依旧很简单的一个接口,查询列表接口,发现10并发单交易场景下,数据库表4w铺底数据,每次查询2000条数据进行orderby显示,平均响应时间2秒以上,数据库的cpu使用率高达95%: 二,抓到这 ...

  7. Windows开发经验 - WinDbg

    1. 远程调试 参考文章:https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/remode-debugging-usi ...

  8. 论文分享NO.1（by_xiaojian）

    论文分享第一期-2019.03.14: 1. Non-local Neural Networks  2018 CVPR的论文 2. Self-Attention Generative Adversar ...

  9. docker仓库harbor镜像列表获取命令

    2019-03-14 搭建好docker仓库harbor之后,在服务器上获取harbor的所有镜像列表命令 curl -u "harbor账号:密码" -X GET -H &quo ...

  10. 【es6】let和const

    let 1.不存在变量提升      es5中var和function都存在变量提升,但let声明的变量不存在.     在代码块内,使用let命令声明变量之前,该变量都是不可用的.这在语法上,称为“ ...