点击场景中的物体，如何实现弹窗？

可以使用`THREE.Raycaster`判断选中的物体，使用`React.js`创建ShadowEditor提供的所有控件和其他html元素进行弹窗。

参考代码：

```javascript
var obj = scene.getObjectByName('正方体');
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

// 监听鼠标按下事件
function onMouseDown(event) {
	raycaster.setFromCamera( mouse, camera );
	
	var intersect = raycaster.intersectObjects(scene.children)[0];
	
	if(intersect && intersect.object === obj) {
		obj.material.color.set(0xff0000);
	}
	
	// 弹窗
	var iframe = React.createElement('iframe', {
		src: 'http://www.baidu.com',
		frameBorder: 'no',
		border: 0,
		marginWidth: 0,
		marginHeight: 0,
		scrolling: 'no',
		allowtransparency: 'yes',
		style: {
			width: '100%',
			height: '100%'
		},
		key: 'win'
	});
	var container;
	var win = React.createElement(Shadow.Window, {
		title: '查看详情',
		style: {
			width: '1300px', // 注意width和height要设置到style属性上
			height: '600px'
		},
		padding: false, // padding设置false，窗口边缘不再留白
		mask: false,
		onClose: () => {
			app.container.removeChild(container);
		}
	}, React.createElement(Shadow.Content, null, [iframe]));
	container = document.createElement('div');
	Object.assign(container.style, {
		position: 'absolute',
		width: '100%',
		height: '100%'
	});
	app.container.appendChild(container);
	ReactDOM.render(win, container);
}

// 监听鼠标移动事件
function onMouseMove(event) {
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}  
```

![输入图片说明](https://images.gitee.com/uploads/images/2021/0312/212614_0f637bf2_956419.png "微信图片_20210309211420.png")

超腾开源/ShadowEditor

内容风险标识

评论 (2)

超腾开源/ShadowEditor .gitee-modal { width: 500px !important; }

内容风险标识