my code :
$(function() { var scene = new three.scene(); var camera = new three.perspectivecamera(75, window.innerwidth / window.innerheight, 0.1, 1000); var renderer = new three.webglrenderer({antialias: true}); renderer.setclearcolor(0xdddddd); renderer.setsize(window.innerwidth, window.innerheight); renderer.shadowmap.enabled = true; renderer.shadowmapsoft = true; var axis = new three.axishelper(10); scene.add(axis); var grid = new three.gridhelper(50, 5); var color = new three.color("rgb(255,0,0)"); grid.setcolors(color, 0x000000); scene.add(grid); var ground_geometry = new three.boxgeometry( 20, 0.1, 20 ); var ground_material = new three.meshphongmaterial( { color: 0xa0adaf, shininess: 150, specular: 0xffffff, shading: three.smoothshading } ); var ground = new three.mesh( ground_geometry, ground_material ); ground.scale.multiplyscalar( 3 ); ground.castshadow = false; ground.receiveshadow = true; scene.add( ground ); var ambient = new three.ambientlight( 0x404040 ); scene.add( ambient ); spotlight = new three.spotlight( 0xffffff ); spotlight.position.set( 10, 10, 15 ); spotlight.castshadow = true; spotlight.shadowcameranear = 8; spotlight.shadowcamerafar = 30; spotlight.shadowdarkness = 0.5; spotlight.shadowcameravisible = false; spotlight.shadowmapwidth = 1024; spotlight.shadowmapheight = 1024; spotlight.name = 'spot light'; scene.add( spotlight ); var controls = new three.orbitcontrols( camera, renderer.domelement ); controls.addeventlistener( 'change', renderer ); var cubegeometry = new three.boxgeometry(5, 5, 5); var cubematerial = new three.meshphongmaterial({ color: 0x456574 , shininess: 150, specular: 0x222222, shading: three.smoothshading, }); var cube = new three.mesh(cubegeometry, cubematerial); cube.position.x = 0; cube.position.y = 0; cube.position.z = 0; scene.add(cube); camera.position.x = 40; camera.position.y = 40; camera.position.z = 40; camera.lookat(scene.position); renderer.render(scene, camera); $("#webgl-container").append(renderer.domelement); $(window).resize(function(){ screen_width = window.innerwidth; screen_height = window.innerheight; camera.aspect = screen_width / screen_height; camera.updateprojectionmatrix(); renderer.setsize( screen_width, screen_height ); }); });
i getting error says : typeerror: array[i].call not function
, pointing line 7484 of three.js library.
have included three.js library using:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
so can see, v73 , haven't touched code. problem?
the error comes after screen clicked , mouse pointer dragged, must have got piece of code.
assuming want scene render when orbitcontrols sends change event, you'll have change code to:
controls.addeventlistener( 'change', render ); . . . function render() { renderer.render( scene, camera ); } renderer.render( scene, camera );
Comments
Post a Comment