Three.js Tutorial For Absolute Beginners
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they are following when they ask beginner Three.js questions about shadows, textures, module imports and setup.
Recommended by 2 people across 2 different months, 2022 to 2023.
What it is
A 53-minute beginner tutorial by Wael Yasmina on the Three.js 3D library. It covers setup, cameras, geometries and materials, lights and shadows, fog, textures, object picking, shaders, importing 3D models and responsive canvases, with project files provided.
What people said
Recommends Muhammad Tehsin · 2022-12 · Stack Overflow · on “Directional Shadow is not creating in thee.js”
I'm new learner of Three.js and following this tutorial [this video] My issue is that I want to create shadow of sphere on plane geometry but I have done same as tutorial but I failed to create shadow.. Please point out my mistake. Thanks var camera, scene, renderer; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); // Controls const orbit = new THREE.Or
Recommends oliiix · 2023-02 · Stack Overflow · on “Cant load module threejs”
This error message pops up non-stop... I finally found a vanilla-js way (not via npm installs) to include three to develop the site locally. Then I upload it and tattaaaa it appears once again for all modules: Loading module from “mydomain.xy/three/examples/jsm/controls/OrbitControls.js” was blocked because of a disallowed MIME type (“text/html”) Everytime I try to implement three.js in whatever way,it fails.... There's one way so far on youtube where the implementation is even as neat as that code completion works. No other non-npm implementation but the one on their website works. And the one on the website cannot even be put into a separate file, no the error pops up again if you do so. A
Cites helloworld123 · 2023-02 · Stack Overflow · on “Why can't I import Three.js using "import * as THREE from 'three';"?”
I am a beginner at three.js and I am following everything it says in the tutorial I am following ( [this video] ) I have installed parcel with "npm install parcel -g", and I have installed three.js with "npm install three" and my code editor (Brackets) is throwing two errors for the code "import * as THREE from 'three';". Under JSlint it says "Expected an identifier and instead saw 'import'." and under ESlint it says "ERROR: Parsing error: The keyword 'import' is reserved" I copied the code in the tutorial exactly as it said, and it's still throwing those errors. weird And in index.html I tried making the script tag have type="module" and without it having that, and it still doesn't work. Maybe i
Cites Azzumar · 2023-05 · Stack Overflow · on “How can I prevent an image from appearing greyed out when loading it onto the scene background in Three.js?”
I'm trying to figure out how to load an image onto the scene background without it appear greyed out by using the TextureLoader() class. I'm following a three.js tutorial [this video] and I'm following what he's doing basically but when I try to load the same way as he does it(using the same image as him), the image appears greyed out. I went to his repository and clone it and it still appears the same so I'm not sure if how he does it is outdated or not or maybe some other factors (browsers,image,etc). I tried doing some research but still I can't find anything that's helpful. Here's how it appears: greyed out background [LINK] Here's how it should have appears(from his tutorial): normal backgro