ThreeJS自带网格线

Threejs里通过AxesHelper 类，可以创建一个可视化的三维坐标系

--------------------------------------------

通过 Three.js 类 GridHelper 可以创建一个坐标网格对象

GridHelper 本质上是对线模型对象 Line 的封装，纵横交错的直线构成一个矩形网格模型对象。

GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )

参数说明

size -- 网格宽度，默认为 10.

divisions -- 等分数，默认为 10.

colorCenterLine -- 中心线颜色，默认 0x444444

colorGrid -- 网格线颜色，默认为 0x888888

========================================================

完整实例，唯一需要注意的是grid默认是XOZ平面，需要饶X轴旋转90度，变成XOY平面。

           //系统坐标系绘制-----------------------------------------var axesHelper = new THREE.AxesHelper(12); scene.add(axesHelper);           //网格线绘制var grid = new THREE.GridHelper(24, 24, 0xFF0000, 0x444444);            grid.material.opacity = 0.4;grid.material.transparent = true;grid.rotation.x = Math.PI/2.0;scene.add(grid);//--------------------------------------------------------

完整代码如下：

<!DOCTYPE html>
<html>
<head><title>第2个threejs三维场景</title><style type="text/css">body{margin: 0;overflow: hidden; /* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script type="text/javascript" src="threejsmaster/build/three.js"></script><script type="text/javascript" src="threejsmaster/build/js/controls/OrbitControls.js"></script><script type="text/javascript" src="threejsmaster/build/js/libs/dat.gui.min.js"></script></head>
<body><div id="notice" align="center">test 3D</div><!-- 作为Three.js渲染器输出元素 --><div id="WebGLwxp" align="center"></div><script type="text/javascript">//网页加载完毕后会被调用function init() {var sceneWidth = 800; //window.innerWidth-400;var sceneHeight = 600; //window.innerHeight-80;//创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）var scene = new THREE.Scene();//创建一个摄像机对象（摄像机决定了能够在场景里看到什么）var camera = new THREE.PerspectiveCamera(45, sceneWidth / sceneHeight, 0.1, 200);//设置摄像机的位置，并让其指向场景的中心（0,0,0）camera.position.set(10.0, -20, 13);camera.up.set(0, 0, 1);// camera.lookAt(scene.position);camera.lookAt(new THREE.Vector3(0, 0, 0));//创建一个WebGL渲染器并设置其大小,设置抗锯齿设置var renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setClearColor(new THREE.Color(0x7696f1));renderer.setSize(sceneWidth,sceneHeight);renderer.setPixelRatio(window.devicePixelRatio); //框锯齿设置//系统坐标系绘制-----------------------------------------var axesHelper = new THREE.AxesHelper(12); scene.add(axesHelper);           //网格线绘制var grid = new THREE.GridHelper(24, 24, 0xFF0000, 0x444444);            grid.material.opacity = 0.4;grid.material.transparent = true;grid.rotation.x = Math.PI/2.0;scene.add(grid);//--------------------------------------------------------//创建一个立方体var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);//将线框（wireframe）属性设置为true，这样物体就不会被渲染为实物物体var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.castShadow = true;//设置立方体的位置cube.position.set(0, 0, 0);//将立方体添加到场景中scene.add(cube);//创建点光源 正上面var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(0, 0, 50);spotLight.castShadow = true;// scene.add(spotLight);//右上角var spotLight2 = new THREE.SpotLight(0xffffff);spotLight2.position.set(10, 10, 5);spotLight.castShadow = true;scene.add(spotLight2);//右下角var spotLight3 = new THREE.SpotLight(0xffffff);spotLight3.position.set(10, -10, 0);spotLight3.castShadow = true;scene.add(spotLight3);//左下角var spotLight4 = new THREE.SpotLight(0xffffff);spotLight4.position.set(-10, -10, -5);spotLight4.castShadow = true;scene.add(spotLight4);//将渲染的结果输出到指定页面元素中document.getElementById("WebGLwxp").appendChild(renderer.domElement);//存放有所有需要改变的属性的对象var controls = new function() {this.rotationSpeed = 0.02;this.cubPositionX = 0.00;this.cubPositionY = 0.00;this.cubPositionZ = 0.00;this.camerPositionX = 10.00;this.camerPositionY = -20.00;this.camerPositionZ = 13.00;              };//创建dat.GUI，传递并设置属性var gui = new dat.GUI();gui.add(controls, 'rotationSpeed', 0, 0.5);gui.add(controls, 'cubPositionX', -10.0, 10.0);gui.add(controls, 'cubPositionY', -10.0, 10.0);gui.add(controls, 'cubPositionZ', -10.0, 10.0);gui.add(controls, 'camerPositionX', -40.0, 20.0);gui.add(controls, 'camerPositionY', -40.0, 10.0);gui.add(controls, 'camerPositionZ', 0.0, 40.0);//渲染场景render();//渲染场景function render() {cube.rotation.z += controls.rotationSpeed;cube.position.x = controls.cubPositionX;cube.position.y = controls.cubPositionY;cube.position.z = controls.cubPositionZ;camera.position.x = controls.camerPositionX;camera.position.y = controls.camerPositionY;camera.position.z = controls.camerPositionZ;document.getElementById("notice").innerHTML = cube.rotation.z.toFixed(2).toString();//通过requestAnimationFrame方法在特定时间间隔重新渲染场景requestAnimationFrame(render);//渲染场景renderer.render(scene, camera);}//innit结束}//确保init方法在网页加载完毕后被调用window.onload = init;</script></body>
</html>

ThreeJS自带网格线相关推荐

用java画网状图_如何在背景中绘制一个带网格线的漂亮条形图？
我是Matlab的新手 . 我做了一个实验 . 我需要帮助将结果绘制在2条形图(具有不同颜色)中,结果图形需要有网格线 . 有人建议使用非常matlap的代码输出一个漂亮的情节吗? 数据如下: x轴是 ...
threejs examples 学习
针对threejs 自带例子,学习一些典型例子 camera camera.html 学习了单个容器,多个camera 在不同区域,显示不同内容.通过camera 的 setViewport 设置绘 ...
用Python的Pandas和Matplotlib绘制股票唐奇安通道，布林带通道和鳄鱼组线
根据指定股票通道指标的算法,能用过去一定时间段的交易数据绘制出上下两条通道线,即价格通道里的上下轨道.一般来说,当股价向上突破上轨时,即预测后市将涨,反之当股价向下突破下轨时,即预测后市将跌. 这里将 ...
android栅格地图,Android中在Bitmap上画网格线
标签: 传入一个bitmap图片,和指定网格线的间隔(以像素为单位),返回新的带网格线的Bitmap private static Bitmap drawBackground(Bitmap bitma ...
Revit的顶点法线及threejs渲染圆弧面的渐变亮度
本文主要用于分享基于Revit的法线理论,导出模型后让threejs呈现立体真实的效果.Revit的顶点法线及threejs渲染圆弧面的渐变亮度. 法线有什么用的?没有法线能否成模型?可以的,没有法线 ...
【转】用Python的Pandas和Matplotlib绘制股票唐奇安通道，布林带通道和鳄鱼组线
我最近出了一本书,<基于股票大数据分析的Python入门实战视频教学版>,京东链接:https://item.jd.com/69241653952.html,在其中给出了MACD,KDJ ...
使用Threejs加载模型1
最近有时间又研究了一下Threejs,之前研究过,但之后就不用了,现在就忘完了,所以这次记录一下,尤其是0到1的过程,因为网上有很多1到2的过程,但是在不了解Threejs的情况下,创建一个工程都很困 ...
ThreeJS中文字体乱码问题
这几天刚刚接触ThreeJS,使用几天发现ThreeJS中默认是不支持中文的,只能显示英文,在网上找了一些资料,终于可以显示中文了.在此把显示中文的方法写下来,供大家参考,本人只是小白,大神勿喷... ...
vue-threeJS数据驱动的三维图形可视化
数据驱动的三维图形可视化在信息暴涨的2010-2016年间,冷暴力的扁平化确实有效降低用户的信息焦虑感,使有限的精力更高效处理过多的信息流.二维平面化扁平化在苹果等大头引领下,成为大众用户机器交流默 ...
python 预测算法_通过机器学习的线性回归算法预测股票走势（用Python实现）
本文转自博客园,作者为hsm_computer 原文链接:https://www.cnblogs.com/JavaArchitect/p/11717998.html在笔者的新书里,将通过股票案例讲述P ...

ThreeJS自带网格线

ThreeJS自带网格线相关推荐

最新文章

热门文章