【3D】vue中使用threejs的CSS2DRenderer的问题

·  阅读 131

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第6天,点击查看活动详情

前言

  • 直接看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"),
	use: "imports-loader?THREE=three"
},
// 经测试,下面两个配置作用不大,去掉或者加上同样报警告,但是不影响使用
{
	test: require.resolve("three/examples/js/renderers/CSS2DRenderer"),
	use: "exports-loader?THREE.CSS2DObject"
},
{
	test: require.resolve("three/examples/js/renderers/CSS2DRenderer"),
	use: "exports-loader?THREE.CSS2DRenderer"
}

import * as THREE from 'three'
import OrbitControls from 'three/examples/js/controls/OrbitControls'
import EffectComposer from 'three/examples/js/postprocessing/EffectComposer'
import 'three/examples/js/renderers/CSS2DRenderer'

controls = new OrbitControls(camera, renderer.domElement)
composer = new EffectComposer(renderer)
detailCSS2D = new THREE.CSS2DObject(detailDiv)
labelRenderer = new THREE.CSS2DRenderer()
复制代码

三、遗留问题

通常webpack中引入three.js相关包,参考OrbitControls和EffectComposer的引入:

  • 1、在配置文件给它们导入THREE,再导出对应使用对象THREE.OrbitControls和THREE.EffectComposer。
  • 2、导入时,将其赋值给一个对象(可以这么描述吧)
import OrbitControls from 'three/examples/js/controls/OrbitControls'
import EffectComposer from 'three/examples/js/postprocessing/EffectComposer'
复制代码
  • 3、使用的时候直接new这个对象即可
new OrbitControls()和new EffectComposer()
复制代码

但是!!

对于CSS2DRenderer同上引入:

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

import {CSS2DObject, CSS2DRenderer} from 'three/examples/js/renderers/CSS2DRenderer'

detailCSS2D = new CSS2DObject(detailDiv)
labelRenderer = new CSS2DRenderer()
复制代码

无法正常使用,报错如下:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_7_three_examples_js_renderers_CSS2DRenderer__.CSS2DObject is not a constructor
复制代码

只能按照一、引用与使用中的三步骤引入,才可以正常使用,但是控制台有警告如下:

warnings @ webpack-internal:///./node_modules/webpack-dev-server/client/index.js?http://localhost:8088:153
webpack-internal:///./node_modules/webpack-dev-server/client/index.js?http://localhost:8088:153 ./src/components/view/demoTest/index.js
876:26-43 "export 'CSS2DObject' (imported as 'THREE') was not found in 'three'
 @ ./src/components/view/demoTest/index.js
 @ ./src/components/view ^\.\/.*$
 @ ./src/http/auth/index.js
 @ ./src/http/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8088 webpack/hot/dev-server event-source-polyfill babel-polyfill ./src/main.js
 
warnings @ webpack-internal:///./node_modules/webpack-dev-server/client/index.js?http://localhost:8088:153
webpack-internal:///./node_modules/webpack-dev-server/client/index.js?http://localhost:8088:153 ./src/components/view/demoTest/index.js
885:26-45 "export 'CSS2DRenderer' (imported as 'THREE') was not found in 'three'
 @ ./src/components/view/demoTest/index.js
 @ ./src/components/view ^\.\/.*$
 @ ./src/http/auth/index.js
 @ ./src/http/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8088 webpack/hot/dev-server event-source-polyfill babel-polyfill ./src/main.js
复制代码

所以我只好直接引入整个js文件,再使用其中的变量。

警告总比报错好吧……

求解:

1、报错怎么解决啊啊啊

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_7_three_examples_js_renderers_CSS2DRenderer__.CSS2DObject is not a constructor
复制代码

2、警告怎么屏蔽啊啊啊

export 'CSS2DObject' (imported as 'THREE') was not found in 'three'
复制代码

四、其他问题

换了新项目,同样的代码,CSS2DRenderer的DIV死活不显示了,查看元素display被设置成了none,可是我明明修改成了block,见鬼了。

注释掉CSS2DRenderer段代码div就显示了,于是怀疑是CSS2DRenderer源码的问题,查看对比果然不一样,再看three.js版本,原来的100正常,现在的108不正常。

临时处理方法:

修改文件package.json如下:

"three": "^0.100.0",
package-lock.json
"three": {
  "version": "0.100.0",
  "resolved": "https://registry.npmjs.org/three/-/three-0.100.0.tgz",
  "integrity": "sha512-/lN2rdE1OqIwJr4/HcSaOisiCY0uVA0sqPpbCG5nil2uICEdS0LfGwSVYTtZDsIpR76r3++h5H3Hzg5D+SJBRQ=="
},
复制代码

保存修改文件后,运行命令cnpm install --save即可。

五、新版本下CSS2DRenderer的使用

5.1、更新版本前关键代码如下:

<div id="test" class="test">{{label.name}}</div>

.test {
  display: none;
  width: 140px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));
  box-shadow: 0 0 2rem rgba(0,180,220,.1) inset;
  color: #eee;
  cursor: pointer;
}

import 'three/examples/js/renderers/CSS2DRenderer' // 引入包

labelRenderer = new CSS2DRenderer() // 创建labelRenderer

let labelDiv= document.getElementById('test')
labelDiv.style.display = 'block'
let labelCSS2D = new CSS2DObject(labelDiv) // 创建labelCSS2D
复制代码

5.2、代码说明:

页面上一个div,样式设置先display: none;隐藏,然后代码中获取div,设置为display = 'block',加到CSS2DObject中通过CSS2DRenderer渲染。

5.3、效果:

在three.js更新版本之前这么写正常,但是一旦升级了three.js的版本,div死活不出现了。

5.4、解决:

方法一:

降低three.js的版本,当然这是没办法的办法,毕竟都在往前走降低版本很多新功能就用不上了。

方法二:

看到有人说谷歌浏览器display: none;不支持,应该写成display: "";

然后我照做,果然div显示了,但是是因为浏览器根本不支持display: "";从头到尾就没有隐藏div!!!

切换火狐浏览器也是同样的效果,所以说去他的谷歌不支持display: none;查了官方文档也没说不支持。

方法三:

猜想是不是样式控制优先级的原因,把class中的display: none;放到style里面试试……

果然!!!正解啊!!!

修改代码如下:

<div id="test" style="display: none;">{{label.name}}</div>

.test {
  /* display: none; */
  width: 140px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));
  box-shadow: 0 0 2rem rgba(0,180,220,.1) inset;
  color: #eee;
  cursor: pointer;
}
复制代码

5.5、你以为解决了吗?

我更新了three.js版本,又有新的问题了。

它出现了,可是它不隐藏了。。。

新版本下正确使用CSS2DRenderer的关键代码:

<div id="test" style="display: none;">{{label.name}}</div>

.test {
  /* display: none; */
  width: 140px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));
  box-shadow: 0 0 2rem rgba(0,180,220,.1) inset;
  color: #eee;
  cursor: pointer;
}

import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer' // 引入包

initRenderLabel () {
  // 创建labelRenderer div3D为当前场景挂载的div
  labelRenderer = new CSS2DRenderer()
  labelRenderer.setSize(div3D.clientWidth, div3D.clientHeight)
  labelRenderer.domElement.style.position = 'absolute'
  div3D.appendChild(labelRenderer.domElement)
}

let labelCSS2D = scene.getObjectByName('test')
  if (labelCSS2D === undefined) {
    let labelDiv = document.getElementById('test')
    // labelDiv.style.display = 'block'
    labelCSS2D = new CSS2DObject(labelDiv)
    labelCSS2D.name = 'test'
    scene.add(labelCSS2D)
  } else {
    labelCSS2D.visible = true
}
复制代码

关键点:

1、隐藏div

此处必须通过style隐藏,不能通过class隐藏。

2、引入相关包

此处从jsm文件夹中引入,无需额外的配置即可使用。

3、显示和隐藏

通过对CSS2DObject创建的对象控制其在场景中visible属性,从而控制显示和隐藏。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改