CODEWITHSUNDEEP
javascriptreactjsthree.js
Tom
Tom

Reputation: 179

Three.js and React

I am a super noob to Three.js trying to get it to work with React..

I was following this medium article Starting with React 16 and Three.js in 5 minutes

I am trying to replicate this example in Three.js:

https://threejs.org/examples/?q=snow#webgl_points_sprites https://github.com/mrdoob/three.js/blob/master/examples/webgl_points_sprites.html

My codesandbox: https://codesandbox.io/s/clever-sid-r7egd?file=/src/ThreeCanvas.js

I might be wrong, but it seems like it's not loading the snowflake pictures(?). My console.log of sprite1 shows: image: undefined

I have been at it a couple of hours now and all I can get is a black screen...

Upvotes: 1

Views: 229

Answers (1)

M -
M -

Reputation: 28497

It must be the way CodeSandbox has its local file structure set up, because if you use the direct URL to the Three.js example images, your demo works as expected:

var threeFolder = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/sprites/";
var sprite1 = textureLoader.load(threeFolder + "snowflake1.png");
var sprite2 = textureLoader.load(threeFolder + "snowflake2.png");
var sprite3 = textureLoader.load(threeFolder + "snowflake3.png");
var sprite4 = textureLoader.load(threeFolder + "snowflake4.png");
var sprite5 = textureLoader.load(threeFolder + "snowflake5.png");

Click for working demo

Upvotes: 1

Related Questions