Home > Developer > Web Develop
Need to introduce camera control plugin Orbitcontrols
1 <script type= "Text/javascript" src= "Framework/jquery.1.11.1.min.js" ></script>2 < Script src= "Framework/three.js" ></script>3 <script src= "Framework/orbitcontrols.js" > </script>
Look directly at the code
12 34<meta charset= "UTF-8" >5<link rel= "stylesheet" type= "Text/css" href= "Stylesheets/main.css" >6<script type= "Text/javascript" src= "Framework/jquery.1.11.1.min.js" ></script>7<script src= "Framework/three.js" ></script>8<script src= "Framework/orbitcontrols.js" ></script>9<title>three</title>Ten<script> OneWindow.onload =function() { A //Creating scene elements -Const SCENE =Newthree. Scene (); - the //Create a mesh model -Const GEOMETRY =NewThree. Boxgeometry (100, 100, 100);//long-width high geometry objects -Const MATERIAL =Newthree. Meshlambertmaterial ({ -color:0xff0000 +});//Color Material Objects - //Model +Const MESH =Newthree. Mesh (geometry, material); AScene.add (mesh);//Add to Scene at - //Add Lights -Const LIGHT =NewThree. Pointlight (0XFFFFFF);//Point Light -Light.position.set (300, 400, 200); -Scene.add (light);//Add the lights in . - in //Add an ambient light -Scene.add (NewThree. Ambientlight (0x333333)); to + //Add Camera -Const CAMERA =NewThree. Perspectivecamera (40, 800/600, 1, 1000); theCamera.position.set (200, 200, 200);//Camera Position *Camera.lookat (scene.position);//toward the center of the scene $ Panax Notoginseng //Create renderer -Const RENDERER =Newthree. Webglrenderer (); theRenderer.setsize (800, 600);//Renderer Size +Document.body.appendChild (renderer.domelement)//Add to document A the //Rendering + functionrender () { -Renderer.render (scene, camera);//incoming scenes and cameras $ } $ render (); - - //creating a camera controller that requires the introduction of a library incoming object theConst CONTROLS =NewThree. Orbitcontrols (camera);//In this camera, the camera controller changes the camera's parameters when the mouse is operating. - //Join Event Listener processingWuyiControls.addeventlistener (' Change ', render);//render the scene at the same time after changing the parameters the - } Wu</script> - About $<body> -<div id= "App" > </div> -</body> - A +Oh, this is really just a square!
WEBGL Camera Controller
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
