为啥我在使用 ThreeJS 和 VueJS 时只看到黑色背景？
Posted
技术标签:
【中文标题】为啥我在使用 ThreeJS 和 VueJS 时只看到黑色背景？【英文标题】：Why am I only seeing a black background using ThreeJS with VueJS?为什么我在使用 ThreeJS 和 VueJS 时只看到黑色背景？ 【发布时间】：2021-08-10 12:39:09 【问题描述】：我在我的项目中添加了一个组件，我打算在其中使用 ThreeJS。 我想用我的两个盒子看到一个“浅色”背景。 我尝试添加一些代码来在我的窗口中呈现两个框，但我只看到黑色背景，你知道我做错了什么吗？
这是我的组件代码：
<template>
<body>
<div id='change'>
<router-link class="changepage" to='/OrdreCouches'> >Retour </router-link>
</div>
<div id="container"></div>
</body>
</template>
<script>
import * as THREE from 'three'
import * as dat from 'dat.gui'
export default
name: 'Visualisation',
data()
return
cube: null,
cube2: null,
renderer: null,
scene: null,
camera: null,
group: null
,
mounted()
this.scene = new THREE.Scene()
this.scene.background = new THREE.Color( 0xf0f0f0)
this.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
1,
10000
)
this.renderer = new THREE.WebGLRenderer( antialias:true )
this.renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(this.renderer.domElement)
const geometry2 = new THREE.BoxGeometry(390, 155, 240)
const material2 = new THREE.MeshBasicMaterial( color: 0x0246464 )
const geometry = new THREE.BoxGeometry(390, 155, 240)
const material = new THREE.MeshBasicMaterial( color: 0x00ff00 )
this.cube = new THREE.Mesh(geometry, material)
this.cube2 = new THREE.Mesh(geometry2, material2)
this.cube.position.set(170,0,485)
this.cube2.position.set(80,0,195)
this.group = new THREE.Group()
this.group.add(this.cube)
this.group.add(this.cube2)
this.scene.add(this.group)
const gui = new dat.GUI()
const camerafolder = gui.addFolder("camera")
camerafolder.add(this.camera.position, "x", 0, 300, 0.01)
camerafolder.add(this.camera.position, "y", 0, 300, 0.01)
camerafolder.add(this.camera.position, "z", 0, 1500, 0.01)
camerafolder.open()
</script>
<style>
* padding: 0; margin: 0
.changepage
position: absolute;
color: rgb(0, 0, 0);
font-size: 30px;
.changepage:hover
position: absolute;
color: rgb(53, 20, 199);
font-size: 30px;
</style>
感谢您的帮助！
【问题讨论】：
【参考方案1】：您可以使用 vue ref 来引用 DOM 元素，而不是使用 document.body.appendxxx。 BoxGeometry 的尺寸太大而无法显示，您忘记设置相机和渲染场景。
这是基于您的代码的代码框示例：
https://codesandbox.io/s/charming-water-52r64?file=/src/components/HelloWorld.vue:863-874
// use ref to get reference of element instead of using document.getxxx/queryxxxx
this.$refs.container.appendChild(renderer.domElement);
// render
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 3;
renderer.render(scene, camera);
【讨论】：
太棒了！谢谢！但现在我有另一个问题。我想在挂载的末尾添加一个名为 animate 的方法，但我不知道如何访问我在挂载部分中创建的多维数据集、组等 如果你想在 vue 方法中访问多维数据集和分组，只需使用这个。更新了代码框供您查看 当我尝试做你所做的事情时，我得到了TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Matrix4>' but got '[object Object]')
codesandbox.io/s/infallible-sinoussi-h9hld?file=/src/components/… 在代码框上我没有收到 TypeError 消息，我不知道为什么。我的项目中有完全相同的脚本。当我启动页面时会出现 TypeError
代码没有错误，如何重现你的问题？以上是关于为啥我在使用 ThreeJS 和 VueJS 时只看到黑色背景？的主要内容，如果未能解决你的问题，请参考以下文章
Vuejs，当我在商店模块中访问它时，为啥 this.$store.state.route.params.activityId 未定义