three.js内部拖拽例子全详解
·
<!DOCTYPE html>
<html> <head> <title>three.js webgl - draggable cubes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> <script src="script/three.js"></script> <script src="script/jquery-1.7.2.min.js"></script> <script src="script/libs/tween.min.js"></script> <script src="script/controls/TrackballControls.js"></script> <!-- <script src="script/renderers/CSS3DRenderer.js"></script> --> <script src="script/libs/stats.min.js"></script> <script> //container是指页面放置这个webGL的一个层 stats是指 var container, stats; //camera是指场景相机 controls是指控制器，比如一般的鼠标视角控制等 scene是场景，就好像一个大的舞台 //projector是可能指屏幕和场景转换工具 renderer是指场景渲染，能把场景呈现到浏览器里 var camera, controls, scene, projector, renderer; //objects是指场景中的实体集合 plane是一个水平面网格，当选中一个物体时，可以通过这个水平面，看到和它在同一平面内的其他物理 var objects = [], plane; //mouse，鼠标所对应的二维向量 offset 是指三维偏移向量 INTERSECTED是指相交的对象 SELECTED选中的对象 var mouse = new THREE.Vector2(), offset = new THREE.Vector3(), INTERSECTED, SELECTED; //初始化整个场景 init(); //开始每秒最大60帧的渲染 animate(); function init() { //创建一个放置webGL的层 container = document.createElement( 'div' ); //把上面的层放到body里 document.body.appendChild( container ); //创建一个透视相机 可视角度70度 浏览器的全屏的宽高 水平视锥 最近1 最远10000 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 ); //相机的位置z正半轴3000 camera.position.z = 3000; //轨迹球控制 鼠标左击旋转 右击平移 滚轮远近 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; //新建一个场景 scene = new THREE.Scene(); //新建一个环境光 就是正常物体都能照到的光 var ambientLight = new THREE.AmbientLight( Math.random() *0xffffff ); //把环境光加到场景中 scene.add( ambientLight ); //再新建一个无线远的平行光，就是像太阳光一样的， var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff ); //把平行光放在y轴正方向上的无穷远处 directionalLight.position.set( 0, 1, 0 ); //把平行光加到场景中 scene.add( directionalLight ); //再建一个点光源 颜色 强度 照射距离 var pointLight = new THREE.PointLight( 0xff0000, 1, 500 ); //设置点光源的位置 pointLight.position.set(0,0,-200); //把点光源加入到场景中 scene.add( pointLight ); //定义一个球体 var geometry = new THREE.SphereGeometry( 70, 32, 16 ); for ( var i = 0; i < 50; i ++ ) { //把这个球体加上网格材质，随机生成一种颜色的网格对象 var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) ); //把材质颜色放到对象的环境颜色上，还没有理解 object.material.ambient = object.material.color; //随机放置一个位置 object.position.x = Math.random() * 3000 - 1500; object.position.y = Math.random() * 1800 - 1000; object.position.z = Math.random() * 2400 - 1200; //加到场景中去 scene.add( object ); //放到对象数组中 objects.push( object ); } //创建一个长2000宽2000，8*8的网格对象并加上一种基本材质 plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) ); //网格对象是否可见 plane.visible = true; //把网格对象加到场景中 scene.add( plane ); //创建一个屏幕和场景转换工具 projector = new THREE.Projector(); //创建一个抗锯齿的webgl渲染器 renderer = new THREE.WebGLRenderer( { antialias: true } ); //是否排列对象 默认是true renderer.sortObjects = false; //设置渲染的范围 renderer.setSize( window.innerWidth, window.innerHeight ); //是否启用阴影地图 renderer.shadowMapEnabled = true; //设置阴影地图是纹理阴影 renderer.shadowMapType = THREE.PCFShadowMap; //把渲染成的所有页面标签加入到webgl层中 container.appendChild( renderer.domElement ); //显示了一个左上角的性能监视窗口 stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild( stats.domElement ); //加入鼠标拖动对象的一系列监听事件 renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false ); renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false ); renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false ); //加入窗口改变大小时的监听事件 window.addEventListener( 'resize', onWindowResize, false ); } //窗口改变大小时的触发事件 function onWindowResize() { //改变相机的aspect属性为当前窗口的宽高 camera.aspect = window.innerWidth / window.innerHeight; //更新相机的投影矩阵 camera.updateProjectionMatrix(); //重新设置场景宽高 renderer.setSize( window.innerWidth, window.innerHeight ); } //当鼠标移动时触发的事件 function onDocumentMouseMove( event ) { //阻止本来的默认事件，比如浏览器的默认右键事件是弹出浏览器的选项 event.preventDefault(); //mouse.x是指 鼠标的x到屏幕y轴的距离与屏幕宽的一半的比值 绝对值不超过1 //mouse.y是指 鼠标的y到屏幕x轴的距离与屏幕宽的一半的比值 绝对值不超过1 // //下面的矩形是显示器屏幕，三维空间坐标系的布局以及屏幕的二维坐标系 // // 鼠标是从 二维坐标系 // 这个点 .-------------------------------------------|-->鼠标x正半轴 // 开始算| 个 y / | // x,y | | / | // | | / | // | 三维坐标系| / | // | -------------------/-------------------->x| // | / | | // | / | | // | / | | // |__________Z_匕______|______________________| // | // 鼠标y \/ // 正半轴 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; //新建一个三维变换半单位向量 假设z方向就是0.5,这样我左右移的时候，还会有前后移的效果 var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ); //屏幕和场景转换工具根据照相机，把这个向量从屏幕转化为场景中的向量 projector.unprojectVector( vector, camera ); //vector.sub( camera.position ).normalize()变换过后的向量vector减去相机的位置向量后标准化 //新建一条从相机的位置到vector向量的一道光线 var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() ); //是否有东西被选中 if ( SELECTED ) { //有的话取到这条光线射到的物体所在水平面上所有相交元素的集合,所以这样就可以限制每次拖动距离不能超出水平面panel var intersects = raycaster.intersectObject( plane ); //这个鼠标点中的点的位置减去偏移向量，新位置赋值给选中物体 if(intersects.length > 0){ SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) ); } return; } //否则的话，光线和所有物体相交，返回相交的物体 var intersects = raycaster.intersectObjects( objects ); //如果有物体相交了 if ( intersects.length > 0 ) { //并且相交物体不是上一个相交物体 if ( INTERSECTED != intersects[ 0 ].object ) { //将这个对象放到INTERSECTED中 INTERSECTED = intersects[ 0 ].object; //改变水平面的位置 plane.position.copy( INTERSECTED.position ); //并把水平面指向到相机的方向 plane.lookAt( camera.position ); } //改变鼠标的样式 container.style.cursor = 'pointer'; } else { //改变鼠标的样式 container.style.cursor = 'auto'; } } //当鼠标按下时触发的事件 function onDocumentMouseDown( event ) { //阻止本来的默认事件，比如浏览器的默认右键事件是弹出浏览器的选项 event.preventDefault(); var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ); projector.unprojectVector( vector, camera ); var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() ); var intersects = raycaster.intersectObjects( objects ); if ( intersects.length > 0 ) { //不能改变视角了 controls.enabled = false; //把选中的对象放到全局变量SELECTED中 SELECTED = intersects[ 0 ].object; //再和水平面相交 var intersects = raycaster.intersectObject( plane ); //选中位置和水平面位置（物体中心）的偏移量 offset.copy( intersects[ 0 ].point ).sub( plane.position ); //改变鼠标的样式 container.style.cursor = 'move'; } } function onDocumentMouseUp( event ) { event.preventDefault(); //又能改变视角了 controls.enabled = true; //如果有相交物体 if ( INTERSECTED ) { //把位置给水平面 plane.position.copy( INTERSECTED.position ); //选中物体置空 SELECTED = null; } //改变鼠标的样式 container.style.cursor = 'auto'; } //每秒最大60帧的渲染，一直在循环 function animate() { //循环本身 requestAnimationFrame( animate ); //渲染场景 render(); //更新性能监视窗口 stats.update(); } function render() { //更新控制器 controls.update(); //渲染场景和相机 renderer.render( scene, camera ); } </script> </body></html>
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
0
0- 0
已为社区贡献7条内容
所有评论(0)