Currently, I've been delving into the basic cube exercise on Three.js, and incorporating the three.js cube into my Vue.JS application.
Initially, everything was functioning smoothly, with my cube rotating as intended using animate, etc.
However, things take a turn for the worse when I introduce OrbitControls. I've experimented with three different versions of npm packages: three-orbitcontrols, three-orbit-controls(THREE), and now orbit-controls-es6.
No matter which one I opt for, upon uncommenting:
controls = new OrbitControls(camera, renderer.domElement)I've attached my code below so you can analyze what I have scripted. Despite dedicating hours today to testing and troubleshooting, I'm still at a loss.
Fingers crossed someone out there can shed some light on where I'm going wrong.
Many thanks in advance!
<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