Currently, I have implemented code that allows me to load, render, and display a STL object using Vue.js and Three.js. My goal now is to replace the currently selected plane with a new face. I've managed to extract the 3 vertices of the clicked-on face (aVertex, bVertex, cVertex).
My challenge lies in rendering a triangle at this specific position with a different color. However, given my limited exposure to 3D concepts and rendering techniques, I'm struggling to figure out how to achieve this task. I've attempted searching online for solutions but haven't had any success yet. Can anyone provide some guidance on the right approach to take?
<template>
<div id="scene-container" ref="sceneContainer" class="scene-container"></div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
export default {
name: "HelloWorld",
data() {
return {
// Data properties here
};
},
methods: {
init() {
// Initialization logic here
},
render() {
// Rendering logic here
},
},
mounted() {
this.init();
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
#scene-container {
height: 99.8%;
}
</style>