Vote count:
0
I am writing a code to create a plane and put objects on it through three.js Below is my code. When I try to run it, getting Uncaught ReferenceError: mythree is not defined
Below is the JS code:
(function (checker) {
var mythree = function() {
var checkerBoard = undefined;
var WIDTH = 600,
HEIGHT = 500;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
hook.append(renderer.domElement);
//CAMERA SETUP
var VIEW_ANGLE = 65,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1, //these elements are needed for cameras to
FAR = 10000; //partition space correctly
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
camera.position.z = 300;
var controls = new THREE.TrackballControls( camera );
controls.target.set( 0, 0, 0 )
//SCENE SETUP
var scene = new THREE.Scene();
scene.add(camera);
// PLAIN SETUP & APPLYING TEXTURE TO IT
var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), material);
plane.overdraw = true;
scene.add(plane);
// TEXTURE SETUP
var texture =THREE.ImageUtils.loadTexture( './images/chessboard.jpg' );
var material = new THREE.MeshLambertMaterial({
map: texture
});
var loader = new THREE.JSONLoader();
var pointLight =
new THREE.PointLight(0xFFFFFF);
pointLight.position = new THREE.Vector3(-10, 30, 100);
scene.add(pointLight);
for(i=0;i<4;i++){
var a=-130;
loader.load( './json/piece.json', function( geometry ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ color: 0x000000 }));
mesh.scale.set( 30, 30, 30 );
mesh.position = new THREE.Vector3(a,-130,15);
mesh.rotation.x += 1.5;
a=a+75;
scene.add(mesh);
});
}
var render = function () {
renderer.render(scene, camera);
controls.update();
requestAnimationFrame(render);
};
render();
}
});(window.checker = window.checker || {});
And html file for the above JS
<html>
<head>
<script src="http://ift.tt/LWr2VS"></script>
<script src="http://ift.tt/1gO2fRH"></script>
<script src="./js/TrackballControls.js"></script>
<script src="./js/zynga.js"></script>
<link href='http://ift.tt/1mgQ7bc' rel='stylesheet' type='text/css'>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p><button>Randomize!</button>
<button>Change my color</button>
</p>
<div id="hook"> <script> mythree();</script></div>
</body>
</html>
Can anybody help in whats wrong with this?
Thanks!
asked 30 secs ago
Aucun commentaire:
Enregistrer un commentaire