添加 Three.JS 'OrbitControls' 导致 VueJS 应用程序黑屏?

本文介绍了添加 Three.JS 'OrbitControls' 导致 VueJS 应用程序黑屏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我一直在完成Three.js 上的基本立方体练习，将three.js 立方体集成到我的Vue.JS 应用程序.

I have been working through the basic cube exercise on Three.js, integrating the three.js cube into my Vue.JS application.

一切都很好，我的立方体使用动画等按计划旋转.

All was well, my cube rotated as planned using animate etc.

然而，当我添加 OrbitControls 时，一切都崩溃了.我尝试了三种不同版本的 npm 包:三轨道控制、三轨道控制(三)和现在的轨道控制-es6.

However, it all falls apart when I add OrbitControls. I have tried three different versions of npm package: three-orbitcontrols, three-orbit-controls(THREE) and now orbit-controls-es6.

不管我用的是哪一个，只要我删除前面的评论:controls = new OrbitControls(camera, renderer.domElement) 我的屏幕画布变黑了...

Regardless of which one I use, as soon as I remove comments in front of: controls = new OrbitControls(camera, renderer.domElement) my screen canvas goes black...

我在下面包含了我的代码，所以你可以看到我有什么.我今天花了几个小时测试和搜索，但无济于事.

I have included my code below so you can see what I have. I've spent hours testing and searching today, but to no avail.

希望有人能指出我的错误.

Hope someone can shine some light on my error.

谢谢大家！

<template>
    <div id="container"></div>
</template>

<script> 
import * as Three from "three";
import OrbitControls from 'orbit-controls-es6';

export default {
  name: 'ThreeWindow',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init() {
        let container = document.getElementById('container');

        this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
        this.camera.position.z = 1;

        this.scene = new Three.Scene();

        let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
        let material = new Three.MeshNormalMaterial();

        this.mesh = new Three.Mesh(geometry, material);
        this.scene.add(this.mesh);

        //var controls = new OrbitControls(camera, renderer.domElement);
       //This line here breaks the code and sends canvas black with no cube.

        this.renderer = new Three.WebGLRenderer({antialias: true});
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(this.renderer.domElement);

    },
    animate() {
        requestAnimationFrame(this.animate);
        //controls.update();
        this.mesh.rotation.x += 0.01;
        this.mesh.rotation.y += 0.02;
        this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
      this.init();
      this.animate();
  }
}
</script>

<style scoped>
    #container {
        width: 1000px;
        height: 1000px;
    }
</style>




[Cube Image Provided.][1]


  [1]: https://i.stack.imgur/UwEEi.png

推荐答案

同意上一个答案，按如下方式导入轨道控件 - 对我有用:

Agree with the previous answer, import orbit controls as follows - worked for me:

import * as Three from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

但是您还有一些其他错误正在破坏它:

But you have some other errors that are breaking it:

当您使用 VueComponent 对象时，您需要修改您传递给 的 camera 和 renderer 变量>OrbitControls 构造函数带有 this 引用，因此它们指的是附加到组件的变量，

As you are working with a VueComponent object, you need to modify your camera and renderer variables that you pass in to the OrbitControls constructor with the this reference, so they are referring to the variables attached to your component,

所以你需要更换

var controls = new OrbitControls(camera, renderer.domElement);

与

this.controls = new OrbitControls(this.camera, this.renderer.domElement);

并将该行移动到您声明 this.renderer

and move that line below the line where you declare the this.renderer

所以你最终得到:

this.renderer = new Three.WebGLRenderer({antialias: true});

this.controls = new OrbitControls(this.camera, this.renderer.domElement);

然后在您的 animate() 函数中类似，

then similarly in your animate() function,

将 controls.update() 替换为 this.controls.update()

这篇关于添加 Three.JS 'OrbitControls' 导致 VueJS 应用程序黑屏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！