I am looking to create a simple 3d Model preview based on a '.stp' file.
While searching I found the Three JS libairy. This libairy allows you to render 3D files like this example: https://threejs.org/examples/#webgl_loader_3mf
I would love to implement this into my own site except with a .stp file (The file: https://www.eleq.com/binaries/downloads/ELEQ%20LS-94%203D%20solid.stp).
I have tried to load this file with the THREE.ObjectLoader without a success. The loader expects a JSON format.
// Create a scene
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);
// Load the object
var loader = new THREE.ObjectLoader();
loader.load(
// resource URL
'https://www.eleq.com/binaries/downloads/ELEQ%20LS-94%203D%20solid.stp',
// called when resource is loaded
function ( gltf ) {
scene.add( gltf.scene );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</body>
</html>
Does someone have expirence with 3D model rendering that can help me?
Related
I am learning from Three.js excamples and nothing is working for base thing like Import function for js files. I get:
Uncaught TypeError: Error resolving module specifier “three”. Relative
module specifiers must start with “./”, “../” or “/”.
in browsers (Firefox, Chrome).
The full code is below but the line with problems (info from browsers) is:
import * as THREE from 'three';
It is line from excample:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj.html
Full code:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<base href="./">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<body>
<!-- <script src="./src/three.js"></script> -->
<div class="">
</div>
<script type="importmap">
{
"imports": {
"three": "./src/three.module.js"
}
}
</script>
<script type="module" >
//IT IS LINE below WITH PROBLEM!
import * as THREE from 'three';
// import * as THREE from './src/three.module.js' // I tried it but doesn't work too
import { OBJLoader } from './src/loaders/OBJLoader.js';
import { MTLLoader } from './src/loaders/MTLLoader.js';
window.lastLoadedObj;
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 );
// instantiate a loader
const loader = new OBJLoader();
// load a resource
loader.load(
// resource URL
'./obj/test1/dresser.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
window.lastLoadedObj = object;
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
</script>
</body>
</html>
I tried to "./", ".", "/", I also made import with "query":
import * as THREE from './src/three.module.js'
and I am lack of another ideas.
I'm trying to import a 3D module into three.js and I was reading here and here. But it's all black. I've tried moving the Camera's z position to 5, but still black. I've just started with Three.js. I loaded the model in online Three.js viewers and it loads fine. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Import 3D Model into Three JS</title>
<link rel="stylesheet" href="../common.css">
</head>
<body>
<div id="container">
</div>
</body>
<script src="../three.js-master/build/three.js"></script>
<script type="module">
// import { THREE } from '../three.js-master/build/three.js';
import { GLTFLoader } from '../three.js-master/examples/jsm/loaders/GLTFLoader.js';
const container = document.querySelector('div#container');
const path_to_model = './Mini-Game Variety Pack/Models/gltf/tree_forest.gltf.glb';
const loader = new GLTFLoader();
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);
loader.load(path_to_model, function (gltf)
{
console.log('Adding glTF model to scene...');
scene.add(gltf.scene);
console.log('Model added.');
console.log('Moving camera 5z...');
camera.position.z = 5;
console.log('Camera moved.');
}, undefined, function (error)
{
console.error(error);
});
container.appendChild(renderer.domElement);
function animate()
{
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</html>
My folders are like this:
Three JS/
common.css
three.js-master/
ImportModel/
index.html
Mini-Game Variety Pack/
Models/
gltf/
tree_forest.glb
tree_forest.gltf.glb
(Not all files are shown, only necessary ones)
I downloaded all the models from here, but using the tree_forest one.
When I load the page, all I see is:
I'm on a Mac and I'm using Five Server on VSCode.
<script src="../three.js-master/build/three.js"></script>
<script type="module">
// import { THREE } from '../three.js-master/build/three.js';
import { GLTFLoader } from '../three.js-master/examples/jsm/loaders/GLTFLoader.js';
Mixing global scripts with ES6 modules is no good idea and quickly leads to undefined behavior. I suggest you organize imports like so until the app works:
import * as THREE from 'https://cdn.skypack.dev/three#0.129.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three#0.129.0/examples/jsm/loaders/GLTFLoader.js';
You should also add some lights to your scene otherwise you just see a black screen. Try it with:
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 10, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, 0, 10 );
scene.add( dirLight );
I'm following several tutorials on Three.js, yet I keep getting a Uncaught ReferenceError: OBJLoader is not defined error when trying to implement my own .obj file. Tried different methods, nothing is helping. Been stuck on this problem for days.
I'm running on localhost using http-server.
Oddly enough, when I switch the new OBJLoader(); to new THREE.ObjectLoader(); it seems to work as it tries to load the file, albeit the file is not a .json file, it is an .obj so it throws an error.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>three.js crash course</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script type="module" src="js/jQuery.js"></script>
<script type="module" src="js/three.min.js"></script>
<script type="module" src="js/OrbitControls.js"></script>
<script type="module" src="loaders/GLTFLoader.js"></script>
<script type="module" src="loaders/OBJLoader.js"></script>
<script type="module" src="js/index.js"></script>
</body>
</html>
JS
window.onload = function() {
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);
$(window).resize(function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
});
var controls = new THREE.OrbitControls(camera, renderer.domElement);
const loader = new OBJLoader();
loader.load (
// resource URL
'./models/boat_large.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
camera.position.z = 3;
var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8);
// game logic
var update = () => {
};
// draw scene
var render = () => {
renderer.render(scene, camera);
};
// run game loop (update, render, repeat)
var GameLoop = () => {
requestAnimationFrame(GameLoop);
update();
render();
}
GameLoop();
}
You need to use new THREE.OBJLoader() when you reference the javascript files like that.
The reason it works in the ThreeJS example is, because it is imported via
import { OBJLoader } from './jsm/loaders/OBJLoader.js';
.
Alternatively you could include the file like it is shown in the example
.
In your case it would obviously be something like
import { OBJLoader } from '../loaders/OBJLoader.js';
assuming the JS posted above is from index.js.
it worked for me adding the following import:
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';
So I decided to see if I could import a DirectX Model and found this XLoader. However I can't seem to initialize it at all. Now, I am the kind of guy who likes to link directly to the library so that whenever there is an update I don't have to re-download and re-upload. My test code looks like this:
<html>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script type="module" src="https://threejs.org/examples/jsm/loaders/XLoader.js"></script>
<script>
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 10000 );
var manager = new THREE.LoadingManager();
var Texloader = new THREE.TextureLoader();
var loader = new THREE.XLoader(manager, Texloader);
loader.load(['FrigateHull.x'], function (object) {
console.log(object);
},function (xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}},
function (xhr) {
console.log(xhr);
});
</script>
</body>
</html>
The error I am getting from this setup is this:
TypeError: THREE.XLoader is not a constructor
I have also tried the import method as described in the examples but still same error. I have also downloaded the git to the server and tried linking to that, but it said something about global is undefined.
What am I missing, or is there another DirectX Model Loader out there I could try?
Should be like this:
<script src="https://threejs.org/build/three.js"></script>
<script type="module">
import { XLoader } from "https://threejs.org/examples/jsm/loaders/XLoader.js";
// ....
var loader = new XLoader(manager, Texloader);
// ....
</script>
Although the TypeError: THREE.XLoader is not a constructor exception is resolved, there are still other problems.
Let's look at the source code of XLoader.js:
import {
AnimationClip,
AnimationMixer,
Bone,
BufferGeometry,
FileLoader,
Float32BufferAttribute,
FrontSide,
Loader,
LoaderUtils,
Matrix4,
Mesh,
MeshPhongMaterial,
Quaternion,
Skeleton,
SkinnedMesh,
TextureLoader,
Uint16BufferAttribute,
Vector2,
Vector3
} from "../../../build/three.module.js";
// ...
We don't have ../../../build/three.module.js code.
It is recommended that you clone the repository of three.js, and then npm install → npm start to start the project, instead of viewing it directly in the browser, which involves a lot of import and export of modules depends on front-end construction tools.
So I'm trying to load a GLTF file and I am receiving this error:
I don't know why it can't locate and open the file. Do I have to set up a local server?
I looked up other examples online and this one includes a DRACOLoader. Admittedly, I don't know what this is for and was wondering if I need to implement this in order for it to load.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>Website first attempt</title>
<style>
body { margin: 0;
background: linear-gradient(to bottom, #33ccff 0%, #ffffff 20%);}
canvas { display: block; }
</style>
</head>
<body>
<!-- <script type = "module" src="build/myScript.js"></script>-->
<script type = "module">
import * as THREE from '../build/three.module.js';
import { GLTFLoader } from '../build/GLTFLoader.js';
let scene, camera, renderer, hlight;
function init () {
//scene
scene = new THREE.Scene();
//camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth/ window.innerHeight, 1, 5000);
//light
hlight = new THREE.AmbientLight (0x404040, 100);
scene.add(hlight);
//render
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor( 0x000000, 0 );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//3d
let loader = new GLTFLoader();
loader.load('assets/londonmap.gltf', function(gltf){
scene.add(gltf.scene);
})
}
function onWindowResize () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
function animate () {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render( scene, camera );
}
init ();
animate();
</script>
</body>
</html>
DracoLoader is only necessary if the glTF asset was compressed with the same-named compression algorithm.
A HTTP 404 means that it was not possible to load the file (in your case assets/londonmap.gltf) from the given path. So you have to make sure that the asset is actually present in the respective directory.
And yes, it's highly recommended to work with a local web server. Especially to avoid any security related browser issues. The project actually provides a small guide about this topic: How to run things locally.