Currently, I am diving into the world of Three.js and encountering a persistent error that has been quite challenging to resolve. Despite my efforts in exploring various solutions, the error remains unresolved.
I have ensured that the Three.js library is included in my project, and the script appears to be correctly written.
Here is an excerpt from my HTML index file:
<body>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242637/TrackballProjectorDetector.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242637/AsciiEffect.js"></script>
</body>
Here is a snippet from the script file causing trouble:
function init() {
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '20px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to change the view';
container.appendChild(info);
camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
controls = new THREE.TrackballControls(camera);
scene = new THREE.Scene();
var light = new THREE.PointLight(0xffffff);
light.position.set(500, 500, 500);
scene.add(light);
var light = new THREE.PointLight(0xffffff, 0.25);
light.position.set(-500, -500, -500);
scene.add(light);
sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 20, 10), new THREE.MeshLambertMaterial());
scene.add(sphere);
The error seems to originate from this line:
camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
Strangely enough, when I remove this line, the error simply shifts to the subsequent THREE element.