I was trying to load a VRML loader through script but getting an error :
Uncaught TypeError: THREE.VRMLLoader is not a constructor
at init (index.html:30)
at index.html:18
Have you actually included THREE.VRMLLoader into your app? This runtime error usually occurs if users miss to include/import external files form the examples directory. Check out how the loader is imported in the official example:
Ya I have included the VRML loader external files. Below is the script i am using from the threejs GitHub page .
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/VRMLLoader.js"></script>
<script>
var camera, scene, renderer, stats;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
camera.position.z = 6;
scene = new THREE.Scene();
scene.add( camera );
// light
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 200, 200, 1000 ).normalize();
camera.add( dirLight );
camera.add( dirLight.target );
var loader = new THREE.VRMLLoader();
loader.load( 'Models/house.wrl', function ( object ) {
scene.add( object );
} );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// controls
var controls = new OrbitControls( camera, renderer.domElement );
//
stats = new Stats();
document.body.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
stats.update();
}
</script>
Can you please verify in the network tab of your browser’s dev console if VRMLLoader.js is actually loaded?
Um, can you please share your entire code as a live example: https://jsfiddle.net/f2Lommf5/
Or maybe as a github repository?
HI @Mugen87 thanks for helping me out and i have already given the whole code in my previous comments. I am adding it again. I have taken this code from one of the tutorial i found on YouTube:
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/VRMLLoader.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);
window.addEventListener('resize', function () {
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
controls = new THREE.OrbitControls(camera, renderer.domElement);
var loader = new THREE.VRMLLoader();
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, wireframe: false });
//var cube = new THREE.Mesh(geometry, material);
loader.load('Models/house.wrl', function (object) {
scene.add(object);
});
//scene.add(cube);
camera.position.z = 6;
var update = function () {
//cube.rotation.x += 0.01;
//cube.rotation.y += 0.005;
};
var render = function () {
renderer.render(scene, camera);
};
var GameLoop = function () {
requestAnimationFrame(GameLoop);
update();
render();
};
GameLoop();
</script>
Sorry, I was asking for a live example. Anyway instead of using this code, try it with this one:
https://threejs.org/examples/webgl_loader_vrml
It’s the one from the official example.
I have tried using the code given in the example and getting the same error.
three.js webgl - loaders - vrml loader<style>
body {
color: #444;
}
a {
color: #08f;
}
</style>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/VRMLLoader.js"></script>
<script type="module">
//import * as THREE from './js/three.js';
//import Stats from './js/stats.module.js';
//import { OrbitControls } from './js/OrbitControls.js';
//import { VRMLLoader } from './js/VRMLLoader.js';
var camera, scene, renderer, stats;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e10);
camera.position.z = 6;
scene = new THREE.Scene();
scene.add(camera);
// light
var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(200, 200, 1000).normalize();
camera.add(dirLight);
camera.add(dirLight.target);
var loader = new THREE.VRMLLoader();
loader.load('Models/house.wrl', function (object) {
scene.add(object);
});
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// controls
var controls = new OrbitControls(camera, renderer.domElement);
//
stats = new Stats();
document.body.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
stats.update();
}
</script>
You have missed some important elements in your code. E.g. You need to include chevrotain.min.js when using THREE.VRMLLoader. You also have missed to add a THREE namespace to OrbitControls. Besides, if you want to use stats.js, you also have to include the library. I’ve removed all references to stats.js for now.
I’ve copied the following file into the examples directory of the three.js repository and everything works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - vrml loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
color: #444;
}
a {
color: #08f;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
vrml format loader test
<!--model from <a href="http://cs.iupui.edu/~aharris/webDesign/vrml/" target="_blank" rel="noopener">VRML 2.0 Tutorial</a>,-->
</div>
<script src="../build/three.js"></script>
<script src="./js/controls/OrbitControls.js"></script>
<script src="./js/libs/chevrotain.min.js"></script>
<script src="./js/loaders/VRMLLoader.js"></script>
<script>
//import * as THREE from './js/three.js';
//import Stats from './js/stats.module.js';
//import { OrbitControls } from './js/OrbitControls.js';
//import { VRMLLoader } from './js/VRMLLoader.js';
var camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
camera.position.z = 6;
scene = new THREE.Scene();
scene.add( camera );
// light
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 200, 200, 1000 ).normalize();
camera.add( dirLight );
camera.add( dirLight.target );
var loader = new THREE.VRMLLoader();
loader.load( 'models/vrml/house.wrl', function ( object ) {
scene.add( object );
} );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// controls
var controls = new THREE.OrbitControls( camera, renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</body>
</html>