javascript - Problems with three.js -
i want create scene car , should able move around scene mouse using three.js.
i tried coding, works fine wanted add orbitcontrol , can't see whole scene anymore. what's wrong in there?
<!doctype html> scene
<script src="js/three.js"></script> <script src="js/controls/orbitcontrols.js"></script> <script> var width = 1300; var height = 500; init(); function animate() { requestanimationframe(animate); controls.update(); function init(){ var renderer = new three.webglrenderer({antialias: true}); renderer.setsize(width,height); var camera = new three.perspectivecamera(45, width/height, 1, 10000); camera.position.x = 5; camera.position.y = 2; camera.position.z = 5.3; var controls = new three.orbitcontrols( camera ); controls.damping = 0.2; controls.addeventlistener( 'change', render ); document.body.appendchild(renderer.domelement); var scene = new three.scene(); var car = new three.object3d(); var body = new three.object3d(); var wheels = new three.object3d(); var ground = new three.object3d(); var cube = new three.mesh(new three.cubegeometry(2,1,5), new three.meshlambertmaterial({color:0x856363})); var cube1 = new three.mesh(new three.cubegeometry(1.8,1,3), new three.meshlambertmaterial({color:0x856363})); cube1.position.y = 0.8; body.add(cube); body.add(cube1); body.position.z = -1.5; car.add(body); car.add(wheels); car.rotation.y = math.pi/6; car.position.y += 1; car.position.x += 3; car.position.z -= 3; var wheel1 = new three.mesh(new three.cylindergeometry(0.8,0.8,0.4,30), new three.meshlambertmaterial({color:0x800000})); var wheel2 = new three.mesh(new three.cylindergeometry(0.8,0.8,0.4,30), new three.meshlambertmaterial({color:0x800000})); var wheel3 = new three.mesh(new three.cylindergeometry(0.8,0.8,0.4,30), new three.meshlambertmaterial({color:0x800000})); var wheel4 = new three.mesh(new three.cylindergeometry(0.8,0.8,0.4,30), new three.meshlambertmaterial({color:0x800000})); wheel1.rotation.z = math.pi/2; wheel2.rotation.z = math.pi/2; wheel3.rotation.z = math.pi/2; wheel4.rotation.z = math.pi/2; wheel1.position.x = -1.2; wheel1.position.y = 0; wheel1.position.z = 0; wheel2.position.x = 1.2; wheel2.position.y = 0; wheel2.position.z = 0; wheel3.position.x = -1.2; wheel3.position.y = 0; wheel3.position.z = -2.5; wheel4.position.x = 1.2; wheel4.position.y = 0; wheel4.position.z = -2.5; wheels.add(wheel1); wheels.add(wheel2); wheels.add(wheel3); wheels.add(wheel4); var plane; var planegeo = new three.planegeometry(30,30,100,100); var texture = three.imageutils.loadtexture('grass.jpg',{},function(){renderer.render(scene,camera)}); texture.wraps = three.repeatwrapping; texture.wrapt = three.repeatwrapping; var planemat = new three.meshlambertmaterial({ map: texture, }); plane = new three.mesh(planegeo,planemat); ground.add(plane); ground.position.z = - 7.5; ground.position.x = 5; scene.add(car); scene.add(ground); var light = new three.spotlight(); light.position.set(170,300,-160); scene.add(light); var directionallight = new three.directionallight (0xffffff, 0.5); directionallight.position.set(0,0,1); scene.add(directionallight); var directionallight1 = new three.directionallight (0xffffff, 0.2); directionallight1.position.set(0,1,0); scene.add(directionallight1); renderer.render(scene, cam); } </script>
Comments
Post a Comment