Currently, I am working on a vue-cli project that involves three.js. In this project, I have created three square surfaces that are perpendicular to each other, with each side measuring 2 units. To view and control the camera's perspective, I have implemented a Camera and OrbitControl. However, the output is not as expected:
https://i.sstatic.net/rCTyI.png
Instead of showing two square planes, the display shows them as rectangular planes.
Below is the code for my vue component:
<template>
<canvas id="canvas" ref="canvas" class="w-100 h-100">
</canvas>
</template>
<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default {
name: 'Canvas',
data: function() {
return {
strokes: [],
paint: false,
scene: {},
renderer: {},
camera: {},
controls: {},
mouse: {},
planes: [],
planeMaterial: {},
};
},
mounted: function() {
let self = this; // reference to Vue "this"
let canvas = this.$refs.canvas; // reference of canvas DOM
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf0f0f0);
this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas });
this.renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
// setting up the camera and orbitControl
this.camera = new THREE.PerspectiveCamera(15, canvas.offsetWidth / canvas.offsetHeight, 1, 1000);
this.camera.position.z = 50;
this.camera.target = new THREE.Vector3();
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.minDistance = 50;
this.controls.maxDistance = 200;
this.controls.mouseButtons = {
MIDDLE: THREE.MOUSE.PAN,
RIGHT: THREE.MOUSE.ROTATE,
}
// material for plane
this.planeMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide, opacity: 0.1, transparent: true });
// creating the square planes
// points used for constructing the planes
let origin = new THREE.Vector3(0, 0, 0);
let p1 = new THREE.Vector3(2, 0, 0);
let p2 = new THREE.Vector3(0, 2, 0);
let p3 = new THREE.Vector3(0, 0, 2);
let p4 = new THREE.Vector3(2, 2, 0);
let p5 = new THREE.Vector3(0, 2, 2);
let p6 = new THREE.Vector3(2, 0, 2);
// creating the planes
let planeGeometry1 = new THREE.PlaneGeometry();
let planeGeometry2 = new THREE.PlaneGeometry();
let planeGeometry3 = new THREE.PlaneGeometry();
planeGeometry1.vertices = [];
planeGeometry2.vertices = [];
planeGeometry3.vertices = [];
planeGeometry1.vertices.push(origin, p1, p2, p4);
planeGeometry2.vertices.push(origin, p1, p3, p6);
planeGeometry3.vertices.push(origin, p2, p3, p5);
let plane1 = new THREE.Mesh(planeGeometry1, this.planeMaterial);
plane1.name = "Front";
let plane2 = new THREE.Mesh(planeGeometry2, this.planeMaterial);
plane2.name = "Bottom";
let plane3 = new THREE.Mesh(planeGeometry3, this.planeMaterial);
plane3.name = "Left";
// adding the planes to the scene
this.scene.add(plane1);
this.scene.add(plane2);
this.scene.add(plane3);
// other code and events
// animate function for three.js
let animate = function() {
requestAnimationFrame(animate);
self.renderer.render(self.scene, self.camera);
}
animate();
},
}
Do you think there is an issue with how I defined the Camera or the OrbitControl? If yes, how do you suggest I fix it?