I want to load multiple obj+mtl files using Three.js with the following code. It works OK with one or two obj data. But when I try to load multiple OBJs (more than three), it crashes especially on iOS.
The obj data is small, which is 6MB in total. If I clone the object after loading, it works even with ten objects, but it crashes if use THREE.OBJMTLLoader multiple times on iOS.
I couldn't find good example which load multiple obj files. Is there anything I should care about for multiple OBJs?
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"></head>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJMTLLoader.js"></script>
<body>
<div id="canvas_frame"></div>
<script>
var canvasFrame, scene, renderer, camera;
canvasFrame = document.getElementById('canvas_frame');
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
canvasFrame.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set(50,50,50);
camera.lookAt( {x: 0, y: 0, z: 0} );
var ambient = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambient);
function animate() {
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
function loadObjMtl(objUrl, mtlUrl, url, x, y, z){
var loader = new THREE.OBJMTLLoader();
loader.crossOrigin = 'anonymous';
loader.load( objUrl, mtlUrl,
function ( object ) {
object.url = url;
object.position.set(x,y,z);
scene.add ( object );
});
}
objUrl = "http://test2.psychic-vr-lab.com/temp/mesh_reduced.obj";
mtlUrl = "http://test2.psychic-vr-lab.com/temp/mesh_reduced.mtl";
loadObjMtl(objUrl,mtlUrl,"",0,0,0);
loadObjMtl(objUrl,mtlUrl,"",20,20,0);
loadObjMtl(objUrl,mtlUrl,"",40,20,0);
loadObjMtl(objUrl,mtlUrl,"",60,0,0);
animate();
</script>
</body>
</html>
You probably run out of graphics memory on your iOS device.
The texture files you use are big, this for example is 4096x4096 http://test2.psychic-vr-lab.com/temp/tex_0.jpg
That is uncompressed to a raw bitmap for OpenGL use and takes a lot of memory then (tens of megs I think, 4096 * 4096 * 3 for RGB would be about 50MB).
Use a smaller resolution image. And additionally use a texture format which you can use in the compressed format, on iOS PVRTC, for which support to three.js was added in https://github.com/mrdoob/three.js/pull/5337 ("PVRTC support in examples")
Cloning works because you then reuse the same texture for many objects -- the big image is in memory only once. That's of course what you want if they all use the same image. But if you need different images for the various objects then you need to make their mem consumption smaller.
Related
I have the following error while using OBJLoader.js to load obj model o
Resource "https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/OBJLoader.js" blocked due to mismatch (X-Content-Type-Options: nosniff) MIME type ("text/html").
My whole code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Model 3D</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/OBJLoader.js"></script>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script>
// Tworzymy scenę
var scene = new THREE.Scene();
// Tworzymy kamerę
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
// Tworzymy render
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Tworzymy loader
var loader = new THREE.OBJLoader();
// Załadowanie modelu
loader.load( 'Rubix.obj', function ( object ) {
scene.add( object );
object.position.set(0, 0, 0);
object.rotation.set(0, 0, 0);
object.scale.set(1, 1, 1);
});
// Pętla renderująca
var render = function () {
requestAnimationFrame( render );
renderer.render( scene, camera );
};
render();
</script>
</body>
</html>
3D model: https://drive.google.com/file/d/1ScF-bSB46F7Ua4dQ0jw1sihmuTjahvom/view?usp=share_link
If you have any ideas what can go wrong please tell me. I will be grateful if you can propose me how to display my OBJ model on a webpage, because I tried ideas from the Internet and none of them worked for me.
cdnjs only serves the core files but not the examples/addons like loaders or controls. Do you mind using a different CDN instead? Below links should work as expected.
https://cdn.jsdelivr.net/npm/three#0.119/build/three.min.js
https://cdn.jsdelivr.net/npm/three#0.119/examples/js/loaders/OBJLoader.js
I try to make a very simple program with a clickable 3d object in Threejs. My code is based on
https://threejs.org/examples/#webgl_interactive_cubes
It works when I click on the object (although the resulting array contains the object twice, I assume because the ray intersects it when entering it and when exiting it).
But when I click in an area just surrounding the object raycaster.intersectObjects returns the object although it should return an empty array.
What am I doing wrong? Why is the object also intersected when I click next to it and not on it? And is an object always included twice in the intersect array because of the ray entering and exiting it?
A working example of the code is here:
https://codepen.io/ettir_deul/pen/PoGLNZx
(open the console to see the intersect array after you clicked on the screen)
And the code looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="libs/three.min.js.r116.1"></script>
</head>
<body>
<div id="threejsCanvas"></div>
<script>
let scene, center, camera, renderer, raycaster;
const mouse = new THREE.Vector2();
const threejsCanvas = document.getElementById("threejsCanvas");
init3d();
function init3d(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0xAAAAEE);
center = new THREE.Vector3(0, 0, 0);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(center.x, center.y, center.z+1);
camera.lookAt(center);
buttonMesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.2), new THREE.MeshBasicMaterial({map : null, color: 0x008844, wireframe: false, side: THREE.DoubleSide}));
buttonMesh.position.set(center.x, center.y, center.z);
scene.add(buttonMesh);
buttonMesh.objId = "buttonMesh";
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
threejsCanvas.appendChild(renderer.domElement);
renderer.render(scene, camera);
raycaster = new THREE.Raycaster();
document.addEventListener('click', onMouseClick, false);
}
function onMouseClick(event){
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
console.log(intersects);
}
</script>
</body>
</html>
the reason for getting the object twice is the
side: THREE.DoubleSide
in the material. You can use THREE.FrontSide
The reason for picking the object when the mouse is close is the canvas and window dimensions not being equal.
If you add :
body{
padding: 0;
margin: 0;
}
in the CSS it is fixed.
Here is a codepen that works.
Two results - is OK. You got 2 faces of mesh. Each one intersects ray. Check result intersection properties: face, faceIndex, point.
Raycaster is not precise and pretty slow. You can use its 'params' to change precision (see https://threejs.org/docs/#api/en/core/Raycaster). I suggest using GPUPicker. It is precise and super fast. Check here:
https://github.com/brianxu/GPUPicker
Edit: Yes you can change material to avoid 2 intersections. But it is often it is not acceptable for surfaces.
Edit: Yes precision settings affects only points and line picking. But GPUPicker can pick exact rendering result of points (shader effects, symbols with transparency). But standard raycaster - can't.
I'm a beginner to three.js.I'm trying to build something similar to this https://virtualshowroom.nissan.in/car-selected.html?selectedCar=ext360_deep_blue_pearl. I built everything using three.js, but I'm not able to figure out how to create a hotspot(like the red dot in the above link) and show pop up when you click on it. below is my project code, let me know if anything else is required.
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<h1></h1>
<script src="./three.js"></script>
<script type="module">
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
var renderer,scene,camera;
scene = new THREE.Scene();
scene.background = new THREE.Color(0xfff6e6)
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new GLTFLoader();
var hlight = new THREE.AmbientLight(0x404040, 100)
scene.add(hlight)
var directionalLight = new THREE.DirectionalLight(0xffffff, 100)
directionalLight.position.set(0,1,0)
directionalLight.castShadow = true
scene.add(directionalLight)
var light = new THREE.PointLight(0xffffff, 10)
light.position.set(0, 300, 500)
scene.add(light)
var light2 = new THREE.PointLight(0xffffff, 10)
light2.position.set(500, 100, 0)
scene.add(light2)
var light3 = new THREE.PointLight(0xffffff, 10)
light3.position.set(0, 100, -500)
scene.add(light3)
var light4 = new THREE.PointLight(0xffffff, 10)
light4.position.set(-5000, 300, 0)
scene.add(light4)
var controls = new OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement)
var loader = new GLTFLoader();
loader.load( './scene.gltf', function ( gltf )
{
scene.add( gltf.scene );
}, undefined, function ( error ) { console.error( error ); } );
// load a image resource
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
Those “hotspots” as you call them are Annotations where the annotation content is basically pure HTML.
The tutorial in the link is probably the best step-by-step readiness you can follow to learn how to do it in your scene.
I can give a walkthrough on the steps required to get the desired effect since I have done it a few times myself.
define a 3d point in your scene where the hotspot should be. You can optionally nest this in a an other Object3D to make sure it scales, moves and rotates with the model / parent.
Add a plane to this point load a image texture to this plane. and there you have your visible hotspot
update the hotspots to make sure they are always looking at the camera by using the lookAt function.
when the user clicks the screen cast a raycast against all the hotspots you have in your scene. Easiest way to do this is by storing all your hotspots in an array.
When the raycast hits a hotspot get the location either of the hitpoint or the hotspots location. Transform that to screen coordinates. Search on stackoverflow how to do this. I am sure there is a post about this.
Final step display your html on the correct location you obtained from the previous step.
The advantage of this method is that the hotspot will integrate nicely with the model in your scene. Since html based hotspots will always be on top of the scene.
That is about all that is to it. Let me know if you need any further clarification!
I am loading FBX models for my project. I Want to create multiple objects of the same FBX model but loading each separately is very inefficient so I would like to save one loaded model and clone it. This concept is working with the .OBJ format.
Everything works as expected but then I use "model.clone();" nothing really happens.
The model is no longer visible but I get no errors. If you compare the cloned model with the original they look exactly the same so I don't know why it's not showing up.
This is how it looks when it's working:
When it's not working it's just a blank canvas.
Here is some simplified working source code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://vitalkia.com/jsLibraries/zlib.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/FBXLoader.js">
</script>
<script>
var aspectRatio = 240 / 135;
var scene;
var renderer;
var loaderFBX;
var camera = new THREE.PerspectiveCamera(45, aspectRatio, 1, 10000);
//Actual code
//Setus up scene and renderer
sceneSetup();
//Load fbx and render
//IGNORE ERROR ABOUT NOT FINDING THE RIGHT TEXTURE. It still works
loaderFBX.load("https://threejs.org/examples/models/fbx/Samba Dancing.fbx", function(model){
//Sending the object "model" works
//But using model.clone() does not. It doesn't give any errors or anything, it's just not visible
//If you compare the cloned model with the original they look exactly the same.
var sendModel = model;//Works
//var sendModel = model.clone();//Doesn't works
console.log("Original: ");
console.log(model);
console.log("Cloned: ");
console.log(model.clone());
calcDistance(sendModel);
scene.add(sendModel);
renderer.render(scene, camera);
});
function calcDistance(model){
var bbox = new THREE.Box3().setFromObject(model);
var camDistance = bbox.max.z;
if(bbox.max.x > camDistance){
camDistance = bbox.max.x;
}
if(bbox.max.y*aspectRatio > camDistance){
camDistance = bbox.max.y*aspectRatio;
}
camera.position.z = camDistance;
model.position.x -= bbox.getCenter().x;
model.position.y -= bbox.getCenter().y;
}
function sceneSetup(){
loaderFBX = new THREE.FBXLoader();
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize(240, 135);
document.body.appendChild(renderer.domElement);
var light1 = new THREE.PointLight(0xffffff, 1, 100000000);
light1.position.set(0, 0, 15);
scene.add(light1);
var newLightPoint = new THREE.HemisphereLight(0x8be2ff, 0xfff9cf, 0.55);
scene.add(newLightPoint);
camera.position.set(0, 0, 100);
scene.add(camera);
}
</script>
Is this how you should do it to reuse models instead of having to reload them for every object? Or is there a better way?
Hi I am having problems importing models from blender in three.js.
At this moment I am using the last version of three.js (R71). I installed the exporter of three.js in blender and exports fine.
This is the code of HTML.
<body>
<font size="+6"><b>TFG</b></font><br>
Volver a atrás
<hr>
<div id='container'></div>
<script src="libs/ThreeJSV71/build/three.min.js"></script>
<script src="libs/OrbitControls.js"></script>
<script src="libs/Coordinates.js"></script>
<script src="libs/dat.gui.min.js"></script>
<script src="libs/stats.min.js"></script>
<script src="libs/ColladaLoader.js"></script>
<script src="threejs/tfg2.js"></script>
<br>
</body>
The next file is the tfg2.js where I load the model.
var width = window.innerWitdh,
height = window.innerHeight,
clock = new THREE.Clock(),
scene,
camera,
renderer,
ambientLight,
directionalLight,
loader,
modelo = new THREE.Object3D();
init();
function init()
{
scene =new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, width/height, 1000);
camera.position.set(0,1,5);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width,height);
renderer.setClearColor(new THREE.Color(0x0000AA));
document.getElementById('container').appendChild(renderer.domElement);
ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0,1,0);
scene.add(directionalLight);
scene.add(new THREE.GridHelper(10,1));
loader = new THREE.JSONLoader();
loader.load('blender/json/camara.json', function(geometry,materials)
{
modelo = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
scene.add(modelo);
});
}
When I try to see the results, nothing appear in the webpage and also de JavaScript console don't show any error. If I export the model with collada format and another .js that I have, I can see the model but I need use JSON.
What I am doing wrong?EDIT:
Added: modelo.position.set(0,0,0) inside the callback to be sure that the model is in origin.
Since there are no error what you can do:
While exporting the object from blender translate the object to origin. Go to origin>> select origin to geometry>> translate object to x, y, z to zero.
Now your camera see # position 0,1,5 xyz respectivily
Probably where your object camera is not looking
Or translate the child of scene to origin
Probably this solve your issue. As I see there are no error and warning in log.