I got the package file, 'three.js-dev' from threejs.org.
All loaders examples shown well.
I coded it to embody 'json loader' referred from 'examples' folder.
This is my 'main.html' codes to embody 'json loader', which places at 'three.js-dev' folder.
<script type="text/javascript" src="./build/three.js"></script>
<script type="text/javascript" src="./src/loaders/JSONLoader.js"></script>
<script src="./examples/js/controls/TrackballControls.js"></script>
<script src="./examples/js/Detector.js"></script>
<!-- _ BASE STYLE -->
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
Upper code shows js source locations.
// World Variable
//////
// //
//////
// DOCUMENT VARIABLE
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var mouseX = 0, mouseY = 0;
var container;
// THREE VARIABLE
var camera;
var scene;
var renderer;
var model;
// Initiate
//////
// //
//////
init();
animate();
// init function
//////
// //
/////////
////// //
/////////
function init() {
container = document.getElementById( 'WebGL-output' );
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 500;
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x221100 );
scene.add( ambient );
// LOADER
//////
// //
//////
// var loader = new THREE.JSONLoader();
// loader.load( './models/teapot-claraio.json', museumCallback );
// BEGIN Clara.io JSON loader code
var objectLoader = new THREE.ObjectLoader();
objectLoader.load("models/teapot-claraio.json", function ( obj ) {
scene.add( obj );
} );
// END Clara.io JSON loader code
// RENDERER
//////
// //
//////
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
// MOUSE MOVE
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
// RESIZE
window.addEventListener( 'resize', onWindowResize, false );
}
function museumCallback( geometry, materials ){
var material = new THREE.MeshFaceMaterial( materials );
model = new THREE.Mesh( geometry, material );
model.scale.set (1,1,1);
model.position.set (0,0,0);
scene.add( model );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
// if ( canvasRenderer ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
`
And browser resulted the error at console tab.
JSONLoader.js:1 Uncaught SyntaxError: Unexpected token import
other error at source tab.
Uncaught SyntaxError: Unexpected token import
I thought, is there issues about 'javascript import'?
So I searched it, and found this. https!!://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
and I replaced './Loader' by "./Loader".
But the error remains.
Is anyone who have wonder wisdom about this issue? Help!
