javascript - Why is there an error, "Uncaught TypeError: undefined is not a function"? -
javascript - Why is there an error, "Uncaught TypeError: undefined is not a function"? -
i looked mismatched braces, still not able figure out why error shows line: lab3.init($('#viewport')); in html.
html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>graphics lab</title> <script src="js/graphics.js"></script> <!-- bootstrap core css --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <style> .starter-template { padding: 40px 15px; text-align: center; } #viewport { height: 500px; width: 600px; background: white; margin: 0px auto; } #viewport-container { } </style> <script src="http://code.jquery.com/jquery-2.1.0.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.js"></script> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">lab 3</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="starter-template"> <h1>graphics</h1> <p class="lead">this 3d graphics scene</p> <div id="viewport-container" class="well"> <div id="viewport"> </div> </div> </div> <script> //initialize viewport lab3.init($('#viewport')); </script> </div><!-- /.container --> </body> </html> javascript:
(function ( lab3 , $, undefined) { lab3.init = function(hook) { var width = 600, height = 500; var renderer = new three.webglrenderer(); renderer.setsize(width, height); hook.append(renderer.domelement); var scene = new three.scene(); var pointlight = new three.pointlight(0xffffff); pointlight.position = new three.vector3(-10, 100, 100); scene.add(pointlight); var view_angle = 65, //65 fov 'natural' fov aspect = width / height, near = 0.1, //these elements needed cameras far = 10000; //partition space correctly var photographic camera = new three.perspectivecamera( view_angle, aspect, near, far); camera.position.z = 300; scene.add(camera); var material = new three.meshlambertmaterial( { color: 0x00bbcc }); var cube = new three.mesh( new three.cubegeometry( 40, 55, 30), material); scene.add(cube); function renderloop() { renderer.render(scene, camera); window.requestanimationframe(renderloop); } window.requestanimationframe(renderloop); } })(window.lab3 = window.lab3 || {} , jquery)
the order of including scripts.
<script src="http://code.jquery.com/jquery-2.1.0.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.js"></script> <script src="js/graphics.js"></script> jquery should included fiirst.
if js references plugin or library, referenced 1 should included before.
javascript jquery three.js
Comments
Post a Comment