3D模型三维坐标

  • N2_544744
    了解作者
  • 298.8KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-26 10:12
    上传日期
模型基础数据计算,3D模型三维坐标,截取自webgl技术案例
模型基础数据计算.rar
  • 二维吸附效果
  • .project
    968B
  • index.html
    2.5KB
  • img
  • 3801213fb80e7bec0d1f10ef2f2eb9389a506bf2.jpg
    64.1KB
  • js
  • jquery-1.11.3.js
    145.6KB
  • css
  • 模型基础数据计算
  • .project
    969B
  • index.html
    13.5KB
  • img
  • js
  • three.js
    1.1MB
  • Projector.js
    22.6KB
  • TrackballControls.js
    13.7KB
  • stats.min.js
    1.9KB
  • css
内容介绍
<!--<!DOCTYPE html>--> <html> <head> <meta charset="utf-8" /> <title>3D模型渲染Demo</title> <script src="js/three.js"></script> <script src="js/TrackballControls.js"></script> <script src="js/Projector.js"></script> <script type="text/javascript" src="js/stats.min.js"></script> <style> *{ padding: 0px; margin: 0px; } canvas{ width:100%; height: 100%; } #control{ width:240px; position:fixed; top:0px; right: 0px; background-color: #eee; } #stats{ height: 83px; margin:0 auto; border-bottom: 1px solid #000; overflow: hidden; } #stats span{ display: block; width: 100%; height: 20px; line-height: 20px; text-align: center; font-size: 14px; } #form1{ z-index: 1000; width:240px; height: 300px; text-align: center; } #canvas3d{ width: 800px; height: 400px; } </style> </head> <body> <!--3D渲染--> <div id="canvas3d"></div> <!--监控程序--> <div id="control"> <div id="stats"><span>帧数监测</span></div> <form action="" id="form1"> <p>物体所在的三维坐标系:</p> <p>X:<input type="text" id="x" name="x" value="" /></p> <p>Y:<input type="text" id="y" name="y" value="" /></p> <p>Z:<input type="text" id="z" name="z" value="" /></p> </form> </div> <script> var x,y,z; x = document.getElementById('x'); y = document.getElementById('y'); z = document.getElementById('z'); var control = document.getElementById('control'); control.style.height = window.innerHeight; var canvas3d = document.getElementById('canvas3d'); // canvas3d.style.width = window.innerWidth - form1.offsetWidth; canvas3d.style.height = window.innerHeight; //container是指页面放置这个webGL的一个层 stats是指监控程序 var container, stats; //STATS(帧数监控器) stats = new Stats(); document.getElementById('stats').appendChild(stats.domElement); //声明变量 var scene,camera,renderer,controls; //objects是指场景中的实体集合 plane是一个水平面网格,当选中一个物体时,可以通过这个水平面,看到和它在同一平面内的其他物理 var objects = [], plane; //mouse,鼠标所对应的二维向量 offset 是指三维偏移向量 INTERSECTED是指相交的对象 SELECTED选中的对象 var mouse = new THREE.Vector2(), offset = new THREE.Vector3(), INTERSECTED, SELECTED; //初始化 function init(){ //创建一个放置webGL的层 var canvas3d = document.getElementById('canvas3d'); container = document.createElement( 'div' ); //把上面的层放到body里 document.body.appendChild( container ); //构造一个场景 scene = new THREE.Scene(); //构造一个相机 //设置透视投影的相机,默认情况下相机的上方向为Y轴,右方向为X轴,沿着Z轴朝里(视野角:fov 纵横比:aspect 相机离视体积最近的距离:near 相机离视体积最远的距离:far) camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000); //构造一个渲染器 renderer = new THREE.WebGLRenderer(); renderer.setSize(canvas3d.offsetWidth,canvas3d.offsetHeight); //设置渲染的区域 //将渲染效果添加到指定区域 canvas3d.appendChild(renderer.domElement); camera.position.x = 20; camera.position.y = 18; camera.position.z = 35; camera.lookAt(scene.position); //设置视野的中心坐标 //创建一个长2000宽2000,8*8的网格对象并加上一种基本材质 plane = new THREE.Mesh( new THREE.PlaneGeometry( 8000, 8000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x00ff00, opacity: 0.25, transparent: true, wireframe: true } ) ); //网格对象是否可见 plane.visible = true; //把网格对象加到场景中 scene.add( plane ); //创建一个屏幕和场景转换工具 projector = new THREE.Projector(); //轨迹球控制 鼠标左击旋转 右击平移 滚轮远近 controls = new THREE.TrackballControls(camera); //旋转速度 controls.rotateSpeed = 1.0; //变焦速度 controls.zoomSpeed = 1.2; //平移速度 controls.panSpeed = 0.8; //是否不变焦 controls.noZoom = false; //是否不平移 controls.noPan = true; //可能是惯性 true没有惯性 controls.staticMoving = false; //动态阻尼系数 就是灵敏度 controls.dynamicDampingFactor = 0.3; //加入鼠标拖动对象的一系列监听事件 renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false ); renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false ); renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false ); } var models = new Array(); //存储多个模型数组 var cube; //追加模型 function createModel(){ //构造模型 camera.position.z = 5; //将摄像机移走 var box = new THREE.BoxGeometry(20,10,10); //构造几何体 var material = new THREE.MeshNormalMaterial({ color:0x00ff00 }); //构造材质 cube = new THREE.Mesh(box,material); //使用网孔(Mesh)构造一个正方体对象 cube.position.x = 0; cube.position.y = 0; cube.position.z = -20; models.push(cube); //将模型扔进数组 objects.push(cube); //构造模型 var box = new THREE.BoxGeometry(10,10,10); //构造几何体 var material = new THREE.MeshNormalMaterial({ color:0x00ff00 }); //构造材质 cube = new THREE.Mesh(box,material); //使用网孔(Mesh)构造一个正方体对象 cube.position.x = -10; cube.position.y = 0; cube.position.z = 3; models.push(cube); //将模型扔进数组 objects.push(cube); //球体 var sphereGeometry = new THREE.SphereGeometry(5, 25,25); var sphereMaterial = new THREE.MeshNormalMaterial({color: 0x00ff00}); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.x = 5; models.push(sphere); //将模型扔进数组 objects.push(sphere); //向场景追加模型数组 for(var i=0; i<models.length; i++){ scene.add(models[i]); } } //以60帧/秒频率循环渲染整个三维场景 var render = function(){ requestAnimationFrame(render); //请求动画框架 //更新控制器 controls.update(); //监控器实时更新 stats.update(); for(var i=0; i<models.length; i++){ models[i].rotation.x += 0.01; models[i].rotation.y += 0.01; models[i].rotation.z += 0.01; } renderer.render(scene,camera); //使用渲染器渲染三维世界 }; //当鼠标移动时触发的事件 function onDocumentMouseMove( event ) { //阻止本来的默认事件,比如浏览器的默认右键事件是弹出浏览器的选项 event.preventDefault(); //mouse.x是指 鼠标的x到屏幕y轴的距离与屏幕宽的一半的比值 绝对值不超过1 //mouse.y是指 鼠标的y到屏幕x轴的距离与屏幕宽的一半的比值 绝对值不超过1 // //下面的矩形是显示器屏幕,三维空间坐标系的布局以及屏幕的二维坐标系
评论
    相关推荐
    • 3D GIS
      3D GIS中三维地形模拟与树木实体造型的研究
    • buildu3d
      buildu3d
    • 3dmax
      水晶吊顶灯制作成品,3dmax实战项目1
    • cub3d
      cub3d
    • simEngine3D
      simEngine3D
    • cub3d
      cub3d
    • Milkshape3D
      Milkshape3D.zipMilkshape3D.zipMilkshape3D.zipMilkshape3D.zipMilkshape3D.zipMilkshape3D.zipMilkshape3D.zipMilkshape3D.zipMilkshape3D.zipMilkshape3D.zipMilkshape3D.zipMilkshape3D.zip
    • spindle3d
      一个斐济插件,用于自动测量有丝分裂纺锤体体积图像的3D形态学参数。 安装 安装 启动斐济并: 主轴3D 3D ImageJ套件 重新启动斐济
    • PerspectiveMatrix3D
      开发Stage3D时所用到的两个adobe工具包中的两个类PerspectiveMatrix3D 和 AGALMiniAssembler。
    • 3d
      3D