Three.js基础：导入STL模型文件

stlloadertest.html：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>three.js webgl - STL</title>

         <script src="build/three.js"></script>

         <script src="js/loaders/STLLoader.js"></script>

         <script type="text/javascript" src="js/controls/OrbitControls.js"></script>

         <script type="text/javascript" src="stlloadertest.js"></script>

     </head>

     <body onload="init()">

         <div>

             <canvas id="mainCanvas" width="1000px" height="600px" ></canvas>

         </div>

     </body>

 </html>

stlloadertest.js：

 var camera, cameraTarget, scene, renderer,controlls,loader,material,mesh;

 function init() {

     //camera

     camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );

     camera.position.set( 0, 0, 500 );

     cameraTarget = new THREE.Vector3( 0, 0, 0 );

     camera.lookAt( cameraTarget );

     //scene

     scene = new THREE.Scene();

     scene.background = new THREE.Color( 0x72645b );

     scene.add(camera);

     // renderer

     renderer = new THREE.WebGLRenderer({

         canvas: document.getElementById('mainCanvas')

     });

     renderer.setSize( window.innerWidth, window.innerHeight );

     // a cube in the scene

     cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50),

             new THREE.MeshBasicMaterial({

                 color: 0xff0000 //red

             })

     );

     cube.position.set(50,0,0);

     scene.add(cube);

     // ASCII file

     //导入dayan.stl

     loader = new THREE.STLLoader();

     loader.load( 'stl/ascii/dayan.stl', function ( geometry ) {

         material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );

         mesh = new THREE.Mesh( geometry, material );

         mesh.position.set( 1, 0, 0 );

         mesh.rotation.set( -Math.PI/2,  0, 0 );

         //Math.PI

         mesh.scale.set( 1, 1, 1 );

         mesh.castShadow = true;

         mesh.receiveShadow = true;

         scene.add( mesh );

         render();

     } );

     // Lights

     scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );

     addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );

     //controlls

     controls = new THREE.OrbitControls( camera ,renderer.domElement );

     controls.addEventListener( 'change', render );    

 }

 function addShadowedLight( x, y, z, color, intensity ) {

     var directionalLight = new THREE.DirectionalLight( color, intensity );

     directionalLight.position.set( x, y, z );

     scene.add( directionalLight );

     directionalLight.castShadow = true;

     var d = 1;

     directionalLight.shadow.camera.left = -d;

     directionalLight.shadow.camera.right = d;

     directionalLight.shadow.camera.top = d;

     directionalLight.shadow.camera.bottom = -d;

     directionalLight.shadow.camera.near = 1;

     directionalLight.shadow.camera.far = 4;

     directionalLight.shadow.mapSize.width = 1024;

     directionalLight.shadow.mapSize.height = 1024;

     directionalLight.shadow.bias = -0.005;

 }

 function render() {

     renderer.render( scene, camera );

 }

巴特西

Three.js基础：导入STL模型文件

最新文章

热门文章