最新文章:

您的位置: 富录-前端开发|web技术博客 > Three.js > 如何选中three场景中渲染出来的物体——射线(raycaster)

如何选中three场景中渲染出来的物体——射线(raycaster)

发布时间:2017年07月01日 评论数:抢沙发阅读数: 8783

    Three.js提供一个射线类Raycasting来拾取场景里面的物体。更方便的使用鼠标来操作3D场景。 raycaster
    function Module(wrapId) {
    	var _this = this;
    	this.scene = null;
    	this.camera = null;
    	this.renderer = null;
    	this.geometry = null;
    	this.material = null;
    	this.cube = null;
    	this.gridHelper = null;
    	this.light = null;
    	this.controls = null;
    	this.transControl = null;
    	this.objsarr = [];
    	this.container = document.getElementById(wrapId);//容器
    	this.container.onclick = function() {
    		_this.getSize(event, _this)
    	}
    }
    Module.prototype = {
    	// 场景
    	initScene: function() {
    		this.scene = new THREE.Scene();
    	},
    	// 相机
    	initCamera: function() {
    		// 透视相机
    		this.camera = new THREE.PerspectiveCamera( 45, this.container.offsetWidth / this.container.offsetHeight, 1, 10000 );
    		// 设置相机的坐标
    		// this.camera.position.y = 5;
    		// this.camera.position.z = 5;
    		this.camera.position.set(0, 5, 5)
    	},
    	// 渲染器
    	initRenderer: function() {
    		this.renderer = new THREE.WebGLRenderer({antialias : true});
    		this.renderer.setSize( this.container.offsetWidth, this.container.offsetHeight );
    		this.renderer.setClearColor(0xffffff, 1);//(原色,透明度)
    		this.container.appendChild( this.renderer.domElement );
    	},
    	// 网格
    	initGrid: function() {
    		this.gridHelper = new THREE.GridHelper(2, 50, 0xff00ff, 0x808080);
    		this.scene.add(this.gridHelper);
    	},
    	// 光线
    	initLight: function() {
    		this.light = new THREE.AmbientLight(0xffffff);
            this.light.position.set(0, 0, 1);
            this.scene.add(this.light);
    	},
    	// 控制器
    	initCtr: function() {
    		this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    		this.controls.dampingFactor = 0.25;
    		//移动 缩放 旋转控制器
    		this.transControl = new THREE.TransformControls( this.camera, this.renderer.domElement );
    		this.transControl.size = 0.5;//尺寸
    		this.scene.add(this.transControl);
    	},
    	// 射线
    	radial: function() {
    		this.raycaster = new THREE.Raycaster();  
    		this.mouse = new THREE.Vector2(); 
    	},
    	getSize: function(event, module) {
    		event.preventDefault();
    		var clientX = event.clientX - module.container.offsetLeft
    		var clientY = event.clientY - module.container.offsetTop + document.body.scrollTop
    		// module.mouse.x = (clientX / module.container.offsetWidth) * 2 - 1;  
    //             module.mouse.y = -(clientY / module.container.offsetHeight) * 2 + 1;  
    
    		module.mouse.x = (clientX / module.renderer.domElement.clientWidth) * 2 - 1;  
            module.mouse.y = -(clientY / module.renderer.domElement.clientHeight) * 2 + 1;
            module.raycaster.setFromCamera(module.mouse, module.camera);
    		var intersects = module.raycaster.intersectObjects(module.objsarr);
    		if(intersects.length > 0) {
    			var INTERSECTED = intersects[0].object
    			module.transControl.attach(INTERSECTED)
    		} else {
    			module.transControl.detach(INTERSECTED)
    		}
    	},
    	// 物体
    	initCube: function() {
    		for(var i = 0; i < 10; i++) {
    			this.geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5, 2, 2, 2 );//(width, height, dept, widthSegments, heightSegments, depthSegments)
    			var crateTexture = new THREE.TextureLoader().load("../../images/demo/jingtian2.jpg"); 
    			this.material = new THREE.MeshBasicMaterial({//基本材质
    				// color: 0xff0000,
    				map: crateTexture,
    				wireframe : false//wireframe线模式渲染
    			});
    			// this.material = new THREE.MeshNormalMaterial({//此材质根据物体表面法向量计算颜色
    			// 	wireframe: false//wireframe线模式渲染
    			// });
    			this.cube = new THREE.Mesh( this.geometry, this.material );
    			this.cube.position.x = Math.random() *4 - 2
    			this.cube.position.y = Math.random() *1.5
    			this.cube.position.z = Math.random() *4 - 2
    			this.scene.add( this.cube );
    			this.objsarr.push(this.cube)
    		}
    		
    	},
    	start: function() {
    		this.initScene();
    		this.initCamera();
    		this.initRenderer();	
    		this.initCube();
    		// initModel()	
    		this.initLight();
    		this.initCtr();
    		this.initGrid();
    		this.radial();
    	}
    }
    var models = new Module("model")
    models.start()
    // 动画
    function animation () {
    	requestAnimationFrame( animation );
    	models.renderer.render(models.scene, models.camera);
    };
    animation ()
二维码加载中...
本文作者:DGF      文章标题: 如何选中three场景中渲染出来的物体——射线(raycaster)
本文地址: https://arbays.com/post/26     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论