Can anyone explain a step by step, process how to install three-js and get started. The steps before the https://threejs.org/docs/#manual/introduction/Creating-a-scene" starts
I have downloaded the "three.js-master.zip" but I cannot figure out the part of:
"Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of three.js in the js/ directory, and open it in your browser"
and where to paste
Please explain as you would to a children class, because everything I've tried till now, I get no visual feedback.
ex.
Download three.js.master,
Create a folder and unzip previous zip inside,
Create a text Document name it "thisNAme" and save it.
Change its extension to html.
copy paste this code.
6..............
Create a project folder anywhere you like.
For example: C:\Users\yourname\simple-threejs-setup if you're using Windows.
Create another folder inside your project folder called js.
In my example: C:\Users\yourname\simple-threejs-setup\js
Download the three.js library (right click and then "download link as..."). Save it in the js folder (C:\...\simple-threejs-setup\js)
Create a new file in your project folder and name it anything you like but change the extension to .html. I named it spinning-cube.html
Right click on the file and select "Open with...", then select you favorite text editor.
Paste in the content from the Getting Started page on the THREE.js documentation. Note the <script src="js/three.js"> tag. This points to the THREE.js library you downloaded in the previous step.
Source extracted below:
spinning-cube.html:
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/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 );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
Save and close the file
Double click on the spinning-cube.html to open it in your default browser. Html files open with your default browser by default. But if you have changed this behaviour. You can open your preferred browser and then just drag the file and drop in inside.*
Related
I have been practicing 3d modeling in few years without coding at. As, the demand for loading ready made 3d models to 3js is increasing, I have decided to start coding. After 2 days of trial and error with my first code, I am sharing with you the code that does not seem to work properly. I am not sure where the error is because part of it is HTML and the other one is a three.js script. Note that, the obj file was converted to JavaScript. I have been following this video https://www.youtube.com/watch?v=NtRrYUAd8rs which does not show the entire html texts. So I decided to add the HTML of https://threejs.org/docs/#manual/en/introduction/Creating-a-scene which shows the basic doc for setting up a scene. Once I open up the html file in the browser an errors of Uncaught ReferenceError: THREE is not defined! I found out that some one in this world was able to solve this error using UMD version of Three.js but I can not see how it should be stated in the html file. You may have a look at my code below;
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="Desktop/convert/three.js"></script><script>
// Our Javascript will go here.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var particleMaterial = new THREE.MeshBasicMaterial();
particleMaterial.map = THREE.ImageUtils.loadTexture('img/convert/china-politics.jpg');
particleMaterial.side = THREE.DoubleSide;
var itmArr = [];
</script>
</body>
</html>
I am practicing threejs while watching the tutorial.
However, one problem occurred.
Mouse control code is not working. Only black screen.
I checked, but it's exactly the same code as the tutorial.
But mine doesn't work.
I am the latest version of Chrome and I got the latest file from OrbitControls.js from GitHub.
I think the only difference from the tutorial is the OrbitControls.js file.
What should I do?
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
window.addEventListener('load', init);
function init() {
const width = 960;
const height = 540;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#myCanvas')
});
renderer.setSize(width, height);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, 1000);
const controls = new THREE.OrbitControls(camera);
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(300, 300, 300),
new THREE.MeshNormalMaterial()
);
scene.add(mesh);
tick();
function tick() {
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
One common root cause for such importing issues is the usage of three.js components from different releases. You can easily verify this by importing your code like so:
<script src="https://cdn.jsdelivr.net/npm/three#0.110/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.110/examples/js/controls/OrbitControls.js"></script>
Another possible problem is the way you create OrbitControls. In recent versions of three.js, the second parameter is mandatory. Meaning the code should look like so:
const controls = new THREE.OrbitControls(camera, renderer.domElement);
I am trying to render a basic three.js scene.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title>Example 01.02 - First Scene</title>
<script type="text/javascript" src="../libs/three.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
// show axes in the screen
var axes = new THREE.AxisHelper(20);
scene.add(axes);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
// add the plane to the scene
scene.add(plane);
// create a cube
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// position the cube
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
// add the cube to the scene
scene.add(cube);
// create a sphere
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// position the sphere
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
// add the sphere to the scene
scene.add(sphere);
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(renderer.domElement);
// render the scene
renderer.render(scene, camera);
}
window.onload = init;
</script>
</body>
</html>
It is an HTML file that i drag and drop onto a browser.
In the same directory with that file, i have a folder called libs and inside i have the three.js and three.mini.js libraries.
I downloaded the three.js zip file from its website and inside there were tons of files.
But since these libaries were the ones that the code required, i just put these two javascript files, and ommitted all the other fiels contained in the zip file.
When i drag and drop the html file onto a browser, the only thing i see is a blank white image.
EDIT: JS console errors:
*Failed to load resource: net::ERR_FILE_NOT_FOUND
*Uncaught ReferenceError: THREE is not defined at init (test.html:29)
Did you try to run things locally as descripted here ?
Personally I use the python version :
If you have Python installed, it should be enough to run this from a command line (from your working directory):
//Python 2.x
python -m SimpleHTTPServer
//Python 3.x
python -m http.server
This will serve files from the current directory at localhost under port 8000, i.e in the address bar type: http://localhost:8000/
Then you can access your file browsing into your localhost (it is now necessary to do so because of resource access policies changing on web browsers).
EDIT
After testing your code, I actually just removed the renderer.setClearColorHex(); line 36, and just placed it in a folder with three.min.js, and it worked fine when I opened it from my folder.
I'm trying to load a 3D model on the screen but the screen is black, and sometimes I receive an error depending on the way I try to implement my code.
Here is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>T1 CG</title>
</head>
<body>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</body>
<script src="./lib/threejs/build/three.min.js"></script>
<script src="./lib/threejs/examples/js/loaders/GLTFLoader.js"></script>
<script src="./poke.js"></script>
</html>
Here is my javascript file:
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);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var loader = new THREE.GLTFLoader();
loader.load('./assets/Squirtle/Squirtle.gltf', function(gltf) {
scene.add( gltf );
});
When I try to run like that, I receive the following error: THREE.Object3D.add: object not an instance of THREE.Object3D. But when I try to do something like scene.add(gltf.scene), I don't receive any error but the screen turns black and nothing happens.
Hope that somebody can help me, I'll appreciate it!
Thanks in advance.
Have you tried adding any lights to your scene? Most materials need to be illuminated in order to be visible. You can try a simple AmbientLight:
var light = new THREE.AmbientLight( 0x404040 );
scene.add( light );
Also make sure your camera is positioned a little far from the origin, otherwise the loaded .gltf and the camera will both be occupying the same spot. For instance, if the object is 2 units wide, you could place your camera 5 units away:
camera.position.z = 5;
I'm in the process of converting my project over to Laravel, and this uses the Three.js library. I followed their Import via Modules documentation, but get the error Uncaught ReferenceError: require is not defined at stl:71, so I assume it isn't being loaded correctly.
I did the following...
Ran "npm install three" in my Laravel root directory
Ran "npm run dev"
Put the following code snippet in the script section of my blade template
var THREE = require('three');
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 );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
I'm still getting familiar with using Laravel and NPM, where I think I may need to import the library somewhere before using it. The ThreeJS documentation doesn't make any mention of this though (when using the NPM module) so I am confused.
Pretty sure I can import it in the resources\app.js for global access, but only need to use it on certain pages. Being the case, I would prefer to figure out why var THREE = require('three'); isn't working.
Create a file under public/js/three.js and put your codes in there.
Then in your blade file add this in script section
<script src="/js/three.js" type="module"></script>
Hope it might work
Another way would be changing your webpack config file to:
webpack.mix.js
mix.webpackConfig({
module: {
rules: [{
test: /\.js?$/,
use: [{
loader: 'babel-loader',
options: mix.config.babel()
}]
}]
}
});
Take a look at Three.js documentation
Important note:
Because the library relies on ES modules, any script that references it must use type="module"
...Like:
<script type="module">
Then you can do stuff like:
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
Read more about Javascript modules here