My journey with three.js has just begun.
First, I decided to experiment with the code provided in this resource: Creating-a-scene
Next, I attempted to incorporate a sprite using the code from this reference: Sprite
Unfortunately, my efforts were met with an error message:
Uncaught TypeError: Cannot read property 'x' of undefined
at SpritePlugin.render (three.js:6973)
at WebGLRenderer.render (three.js:21007)
at render (sprite.html:43)
The html file containing the possible mistake can be found here:
Could someone please assist me in identifying where I went wrong? Here is the code snippet I used:
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// instantiate a loader
var loader = new THREE.TextureLoader();
//allow cross origin loading
//loader.crossOrigin = '';
// load a resource
loader.load("https://codefisher.org/static/images/pastel-svg/256/bullet-star.png");
var spriteMaterial = new THREE.SpriteMaterial( { map: loader, color: 0xffffff } );
var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(200, 200, 1);
scene.add( sprite );
camera.position.z = 2;
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>