How to clear canvas (THREE.js)

Question

I'm making a THREE.js code, but when rotating the cube, they constantly overlap. I don't have a context so I can't do clearRect(window.innerWidth, window.innerHeight). How can I stop it from happening?

Calviղ Do know Three.js? Sorry for asking, it's been unanswered for ages now.

https://code.sololearn.com/W657UCYw3Fm8/?ref=app

Answer 1

I tried to understand your game code. Based on my canvas experience, I think you should not run create method on every animated frame, it should run once.
And I created another method, draw for animate the x y rotation.

My method maybe not correct, I never write any three.js code before.

https://code.sololearn.com/WVyrnZyqhSEb/?ref=app

Answer 2

https://code.sololearn.com/WTEZoMP1PdhE/?ref=app
https://code.sololearn.com/WaLIJHXrZtJ9/?ref=app
https://code.sololearn.com/W3nqLj5kFhkh/?ref=app
https://code.sololearn.com/WWj7va33hmcz/?ref=app
https://code.sololearn.com/WH1cqt0raj6b/?ref=app
https://code.sololearn.com/W5I0Hna4DO2h/?ref=app
https://code.sololearn.com/W4PW1aYe11dL/?ref=app
https://code.sololearn.com/W45e7lc79hTE/?ref=app
https://code.sololearn.com/W00xf1rEBcYS/?ref=app
https://code.sololearn.com/WrnEBQSDQpOy/?ref=app

Answer 3

Clueless Coder Thanks for the recommendation, I learned the OOP way to setup threes.js from your code now, I think theee.js is a great library, make me want to build some 3d games now.

Answer 4

Calviղ It's very active as well. It has a ton of books, videos, examples and a great documentation to learn from.

Answer 5

Calviղ Thanks for the help. I definitely would recommend it, it a step up from p5WEBGL and a step down from regular WEBGL

Answer 6

hih