I'm baffled by the interaction between vue and THREE.js. I have the same object that works fine in a plain JS environment but not in vue.js. The canvas remains empty in vue.js and the developer console displays multiple warnings.
The code I used in JS is identical to the code in vue (see below). I have also included a screenshot of the warnings I received in Chrome's developer tools.
I suspect that the issue is related to the path to the OBJ file, as some unexpected lines are clearly not from an HTML file. I have tried different alternatives such as "./assets/threeD/harrie.obj" or using
let ha = require("../assets/threeD/harrie.obj");Failed to compile.
./src/assets/threeD/harrie.obj 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # This file uses centimeters as units for non-parametric coordinates.
|
| v -1.860180 5.269862 2.275461
Deleting the first line does not resolve the issue, the error just moves to the next line with content.
What's most perplexing is that some sort of geometry seems to be loading, but regardless of the camera's scaling or rotation, the canvas remains empty. THREE was installed via npm
https://i.sstatic.net/rGyNY.png
import * as THREE from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader";
export default {
name: "Project1",
data: function () {
return {
mesh: null
}
},
methods: {
harriethree: function () {
let w = document.getElementById("threejsview").offsetWidth;
let h = document.getElementById("threejsview").offsetHeight;
const sceneContainer = document.getElementById("threejsview");
const container = document.getElementById("scene");
document.body.appendChild(container);
let scene, camera, renderer, loader;
scene = new THREE.Scene();
scene.background = new THREE.Color('#1d1c1c');
camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
camera.translateX(-10);
renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
renderer.domElement.id = "harrieCanvas";
sceneContainer.appendChild(renderer.domElement);
let directionalLight = new THREE.DirectionalLight("white", 1);
scene.add(directionalLight);
let orb = new OrbitControls(camera, renderer.domElement);
orb.update();
loader = new OBJLoader();
loader.load("../assets/threeD/harrie.obj", (obj) => {
scene.add(obj);
console.log(obj);
renderer.render(scene, camera);
})
animate();
function animate() {
requestAnimationFrame(animate);
// required if controls.enableDamping or controls.autoRotate are set to true
orb.update();
renderer.render(scene, camera);
}
}
},
mounted() {
this.$nextTick(function () {
this.harriethree();
})
}
}#pro1Top {
margin: 20vh 2vw 20vh 2vw;
display: grid;
grid-template-columns: 47vw 47vw;
grid-template-rows: 80vh 80vh;
grid-column-gap: 2vw;
}
#threejsview {
grid-row: 1 /span 1;
grid-column: 1 /span 1;
width: 100%;
height: 100%;
}
#pro1content {
grid-row: 1 /span 2;
grid-column: 2 /span 1;
background-color: green;
}<template>
<div id="pro1Top">
<div id="threejsview">
<div id="scene"></div>
</div>
<div id="pro1content">
<h1>Harrie</h1>
<p>Harrie was created during</p>
</div>
</div>
</template>