添加 Three.JS 'OrbitControls' 会导致 VueJS 应用程序出现黑屏？答案

【问题标题】：Adding Three.JS 'OrbitControls' Causes Black-Screen in VueJS application?添加 Three.JS 'OrbitControls' 会导致 VueJS 应用程序出现黑屏？
【发布时间】：2020-03-20 00:14:01
【问题描述】：

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

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

但是，当我添加 OrbitControls 时，一切都崩溃了。我尝试了三个不同版本的 npm 包：三轨道控制、三轨道控制（三）和现在的轨道控制-es6。

无论我使用哪一个，只要我删除前面的 cmets： controls = new OrbitControls(camera, renderer.domElement)我的屏幕画布变黑了...

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

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

谢谢大家！

<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.com/UwEEi.png

【问题讨论】：

标签： javascript vue.js three.js vuetify.js

【解决方案1】：

同意前面的回答，导入轨道控制如下——对我有用：

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

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

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

所以你需要更换

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

与

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

将该行移到声明this.renderer的行下方

所以你最终得到：

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

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

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

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

【讨论】：

【解决方案2】：

您应该按如下方式导入 OrbitControl：

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

【讨论】：

【解决方案3】：

首先，检查浏览器控制台中的错误。
我首先想到的是您发送给 OrbitControls 构造函数的第二个参数是 renderer.domElement，但渲染器对象是在此行之后创建的。
尝试在创建渲染器后将 OrbitControls 调用移至。
IE。

this.renderer = new Three.WebGLRenderer({antialias: true});
this.renderer.setSize(container.clientWidth, container.clientHeight);
var controls = new OrbitControls(camera, renderer.domElement); /*<-- moved to after renderer is created*/

几年前我是experimenting with Three.js and Vue，您可能会觉得它很有趣或有帮助

【讨论】：