JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src="https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js"></script>
<h2>Part 1 - Basics</h2>

<p>If you're completely new to three.js...  welcome! It's a pretty great library. But before starting, you need to understand the most basic rules: a scene requires camera, light and renderer, a mesh is made from a geometry and a texture, and so on. And before that, you should have basic knowledge of JavaScript: what are functions, loops, arrays, objects?</p>

<p>I'm not going to write a tutorial for all that, as there are plenty of good ones out there already:</p>

<ul>
    <li><a href='https://threejsfundamentals.org/'>Three.js Fundamentals</a></li>
    <li><a href='https://discoverthreejs.com/book/contents/'>Discover three.js</a></li>
</ul>

<p>There are loads of three.js demos and edit-able examples on jsFiddle and elsewhere. I suggest you play with them, tweak things, figure out how stuff fits together. Even if they're old and using now-deprecated code, it's still useful for learning.</p>

<p>Anyway, in this chapter we'll set up a simple level with some trees and rocks scattered around, a skybox, a light source, a crappy-looking 'dragon' (cubes are too boring) and a camera that can look around, but is fixed on the dragon.</p>

<p>The final result is below. Use Z and X keys to rotate the camera.</p>

<div id='game_container'></div>

CSS

#game_container {
    width: 400px;
    height: 300px;
    border: 2px solid black;
}