vue中使用threejs的CSS2DRenderer的问题

最新推荐文章于 2024-08-21 16:08:40 发布

Beam007

最新推荐文章于 2024-08-21 16:08:40 发布

阅读量7.5k

点赞数 4

分类专栏： threejs

本文链接：https://blog.csdn.net/Beam007/article/details/103420197

版权

本文介绍了在Vue项目中使用three.js的CSS2DRenderer时遇到的版本更新问题，包括THREE未定义的警告、CSS2DObject和CSS2DRenderer的导入与使用、控制台警告的处理、新版本下CSS2DRenderer的DIV显示问题。作者尝试了降低版本、修改display属性、调整样式控制优先级等方法，并找到了正确隐藏和显示CSS2DRenderer对象的方法。

摘要由CSDN通过智能技术生成

前言

直接看5.5、你以为解决了吗？。
[ 因为three.js更新了版本，引入和使用方式都变了，新版本下CSS2DRenderer的使用已经没有前面四点提及的问题，前四点仅做记录。 ]
直接看5.5、你以为解决了吗？。
直接看5.5、你以为解决了吗？。

一、引用与使用

1、配置webpack.base.conf文件

往CSS2DRenderer中导入THREE，配置webpack.base.conf文件如下：

{
	test: require.resolve("three/examples/js/renderers/CSS2DRenderer"),
	use: "imports-loader?THREE=three"
}

说明：
当报错THREE未定义时，因为CSS2DRenderer中用了很多THREE对象，而THREE对象若不导入系统不知道是啥。
如上配置，将three导入three/examples/js/renderers/CSS2DRenderer，THREE就等于three暴露出的变量。

2、导入CSS2DRenderer包

import 'three/examples/js/renderers/CSS2DRenderer'

注意：
此处需要使用CSS2DRenderer中的两个对象CSS2DRenderer和CSS2DObject。

3、CSS2DObject和CSS2DRenderer的使用

detailCSS2D = new THREE.CSS2DObject(detailDiv)
labelRenderer = new THREE.CSS2DRenderer()

然后警告，如下:
export ‘CSS2DObject’ (imported as ‘THREE’) was not found in ‘three’
export ‘CSS2DRenderer’ (imported as ‘THREE’) was not found in ‘three’
但不影响正常使用。
警告说明：在three中没有发现导出CSS2DObject和CSS2DRenderer。

二、部分关键代码

{
	test: require.resolve("three/examples/js/controls/OrbitControls"),
	use: "imports-loader?THREE=three"
},
{
	test: require.resolve("three/examples/js/controls/OrbitControls"),
	use: "exports-loader?THREE.OrbitControls"
},
{
	test: require.resolve("three/examples/js/postprocessing/EffectComposer"),
	use: "imports-loader?THREE=three"
},
{
	test: require.resolve("three/examples/js/postprocessing/EffectComposer"),
	use: "exports-loader?THREE.EffectComposer"
},
{
	test: require.resolve("three/examples/js/renderers/CSS2DRenderer"),
	u

最低0.47元/天解锁文章