I've been going through some beginner tutorials for three.js and I'm facing an issue where I only see a red background when I try to run the code I created in Atom on Chrome (Version 62.0.3202.75 (Official Build) (64-bit)), Mac OS X (macOS Sierra, Intel Iris Plus Graphics 640 1536 MB). However, when I download and run the exact same code from a tutorial located in
Downloads>threes_js_basic>index.htmlI have tried running the code through a local server following advice from this link without success. I made sure that WebGL is enabled and even installed a cross-origin resource sharing extension.
The code snippet below is directly copied from the tutorial that I downloaded and pasted into Atom. You can find the original tutorial link here: Tutorial Link
<html>
<head>
<title>threejs - basic</title>
<style>
body{
margin: 0;
overflow: hidden;
}
canvas{
background: red;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="three.js"></script>
<script>
//RENDERER
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x00ff00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
//CAMERA
var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
// var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 0.1, 3000);
//SCENE
var scene = new THREE.Scene();
//LIGHTS
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
var light1 = new THREE.PointLight(0xffffff, 0.5);
scene.add(light1);
//OBJECT
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({color: 0xF3FFE2});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000);
scene.add(mesh);
//RENDER LOOP
requestAnimationFrame(render);
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
</script>