I am trying to load a obj file using OBJloader.js
I am trying to load "plane.obj" file which exists inside the same folder where the html files exists and "OBJLoader.js" also exists in the same folder.
Page doesn't show up anything.
Here is the code :
var scene = new THREE.Scene();
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.CubeGeometry(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 render() {
requestAnimationFrame(render);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
var texture = THREE.ImageUtils.loadTexture( 'tex.jpg' );
var loader = new THREE.OBJLoader();
loader.load( 'plane.obj', function ( object ) {
scene.add( object );
} );
render();
This is likely caused by trying to load a resource from the file system. You're probably getting a same origin policy security violation and need to serve up your page and resources from the same protocol, domain and port. There are a few easy ways to do this - I use a simple http server app via Node JS. check out How to run things locally for more options.
Well, it turned out for me to be caused by the absence of light in the scene. Also, improper camera position may also lead to "invisible" OBJ models. Try adding the following lines:
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
Related
I'm struggling to get an animation to play together with my GLTF 3D model. Most similar issues that I've seen on Stack Overflow are relating to the mixer not being updated. Which is not the problem in my case.
This is my fiddle: https://jsfiddle.net/rixi/djqz1nb5/11/
import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js";
import { GLTFLoader } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js";
let clock, controls, scene, camera, renderer, mixer, container, model;
initScene();
animate();
function initScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
clock = new THREE.Clock();
renderer = new THREE.WebGLRenderer();
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
container = document.getElementById("container");
container.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);
}
scene.background = new THREE.Color("#f8edeb");
// LIGHT
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
//HELPERS
const axesHelper = new THREE.AxesHelper(5);
let gridHelper = new THREE.GridHelper(30, 30);
scene.add(light, axesHelper, gridHelper);
//GLTF START
const GLTFloader = new GLTFLoader();
GLTFloader.load("https://richardlundquist.github.io/library/alice_TEST2.glb", function (gltf) {
model = gltf;
mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction(gltf.animations[0]).play();
scene.add(model.scene);
});
camera.position.set(0, 20, 50);
function animate() {
requestAnimationFrame(animate);
let delta = clock.getDelta();
if (mixer) {
mixer.update(clock.getDelta());
}
renderer.render(scene, camera);
}
There is no error in the console. The animation is listed in the array and plays as it should in Don McCurdy's GLTF viewer (https://gltf-viewer.donmccurdy.com/)
But for some reason it will not play in my three js setup. Any clues? I would be extremely grateful for any help or hints on how to solve the issue.
I found two critical errors here.
At the top of your code, you pull in Three r122 with GLTFLoader r132. These need to be the same revision. Try setting them all to r132.
You call getDelta() twice here:
let delta = clock.getDelta();
if (mixer) {
mixer.update(clock.getDelta());
}
The second call to getDelta() comes immediately after the first, so always returns zero delta time. Thus, the animation never moves forward.
I want to use the build version of three.js (https://threejs.org/build/three.js) for a project.
I was using an old one version of the library and everything was fine and my mesh (loaded form a .json file) appeared normally.
Here's my code :
var renderer, scene, camera, mesh, material;
initMesh();
function initMesh() {
var controls;
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0,500,700);
camera.up = new THREE.Vector3(0,0,0);
camera.lookAt(new THREE.Vector3(0,0,0));
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new THREE.JSONLoader();
loader.load('test.json', function(geometry) {
material = new THREE.MeshBasicMaterial({ color: 0x00ff84, wireframe: true, wireframeLinewidth: 3 });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
render();
});
}
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
};
Here is what I got when using old one library.
I don't see what I miss ? Any idea ? Thank you.
I tried with your example
Removing this line fixed the issue: camera.up = new THREE.Vector3(0,0,0);
I'm new to three.js and am having trouble loading a collada object to it. I can't get home.dae to render in the browser.
I updated the code under SECOND UPDATE based on the answers.
// INITIAL
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 loader = new THREE.ColladaLoader();
loader.load('home.dae', function(collada){
scene.add(collada);
});
function render() {
renderer.render(scene, camera);
}
render();
// SECOND UPDATE
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0,1,4);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.ColladaLoader();
loader.load('home.dae', function(collada){
scene.add(collada.scene);
});
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
Your render function is called only once. Try with this -
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
Also check if you file path is valid.
Few things that come to mind:
as #Rasheduzzaman already noted, the render-function is called too early (when you call render(), the scene.add(collada); call can not have happened. Use his Answer instead.
the collada-loader works a bit differently: the documentation isn't clear about this, but the returned object is a collection of all the stuff that could've been in the collada-file, see here for a list: https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/ColladaLoader.js#L181-L204 (also: use the debugger from the browser-devtools to inspect the data you find there). You will probably want to do scene.add(collada.scene) or similar.
you are not setting a position for the camera, so it is located at (0,0,0), which might not be a great idea, try camera.position.set(0,1,4) or something like that.
you need to know what to expect: what is the size of the model you are loading? Where is it placed? Make sure to point your camera there (could use camera.lookAt(object.position)) and adjust nearPlane and farPlane accordingly.
I'm new to three.js and need to make a project for school. For this project I need a texture on my cube. But the screen stays black.. and there are no console errors! I did everything I can so this is kinda my last change haha.
My code:
<script src="js/three.min.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.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('images/crate2.jpg')
})
// =
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.05;
renderer.render(scene, camera);
};
render();
</script>
You do not have a light in your scene.
Adding one like below should work
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0xffffff); // white light
scene.add(light);
I would add a link to a js fiddle but it seems they have changed and I can not longer find where to get the link.
Anyway, just ad some sort of light.
Perhaps adding a light would help? That or try using THREE.MeshBasicMaterial
Am trying to create an app which will import the 3D model exported from Blender/Maya into ThreeJS. I have installed Blender and three js export option is also coming, however when am trying to load the exported JS (I tried renaming extension to json also) it is not working and showing blank screen. Can anyone help me with this by providing a sample code for this?
TIA.
Regards,
NileshW
add a div to the body
<div id="myScene"></div>
then..
<script>
// global
var scene, renderer, camera, cube, controls;
init();
animate();
function init() {
// scene box
var myScene = document.getElementById("myScene");
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .01, 10000);
camera.position.z = 500;
var light = new THREE.AmbientLight(0xffffff); // soft white light
scene.add(light);
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
/* ==== OPTIONAL SPOTLIGHT ====
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(100, 1000, 2000);
spotLight.castShadow = true;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.shadowCameraNear = 500;
spotLight.shadowCameraFar = 4000;
spotLight.shadowCameraFov = 30;
scene.add(spotLight);
*/
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
myScene.appendChild(renderer.domElement);
loader = new THREE.JSONLoader();
loader.load("your_json_file.js", function (geometry, materials) {
mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(materials));
scene.add(mesh);
});
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
Have you tried the code from chawk - just change to use your test.js (check folder path)
If the code in you function init() is complete then it looks like you've missed a couple of things
You have created a camera, created a scene, created a loader, loaded a file and added mesh to the scene
You need to add the camera to the scene
You also need to add some light(s) to your scene
var camera, scene, renderer;
var geometry, material, mesh;
var controls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 5, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 50, 50, 50 );
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
scene = new THREE.Scene();
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
// Load in the mesh and add it to the scene.
var loader = new THREE.JSONLoader();
loader.load( "models/testnew.js", function(geometry){
var material = new THREE.MeshNormalMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
//
renderer = new THREE.CanvasRenderer();
renderer.setSize( 1000, 600);
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}