var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, - 0.25, 0.6 );
mesh.rotation.set( 0, Math.PI / 2, 0 );
mesh.scale.set( 0.5, 0.5, 0.5 );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
loader.load( 'test.stl' );
加載stl的部分
我們假設你有一個名爲”test.stl“的stl模型
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, - 0.25, 0.6 );
mesh.rotation.set( 0, Math.PI / 2, 0 );
mesh.scale.set( 0.5, 0.5, 0.5 );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
loader.load( 'test.stl' );
加載OBJ格式的部分
var mesh;
var loader = new THREE.OBJLoader();
loader.load('fll.obj', function (loadedMesh) {
var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});
// loadedMesh is a group of meshes. For
// each mesh set the material, and compute the information
// three.js needs for rendering.
loadedMesh.children.forEach(function (child) {
child.material = material;
child.geometry.computeFaceNormals();
child.geometry.computeVertexNormals();
});
mesh = loadedMesh;
loadedMesh.scale.set(1, 1, 1);
loadedMesh.rotation.x = -0.3;
scene.add(loadedMesh);
});
完整實例源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example 08.06 - Load OBJ model </title>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="OBJLoader.js"></script>
<script type="text/javascript" src="stats.min.js"></script>
<script type="text/javascript" src="dat.gui.min.js"></script>
<style>
body {
/* set margin to 0and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we are looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
// position and point the camera to the center of the scene
camera.position.x = 130;
camera.position.y = 140;
camera.position.z = 150;
camera.lookAt(scene.position);
scene.add(camera);
// add spotlight for the shadows
var spotLight = new THREE.DirectionalLight(0xffffff);
spotLight.position.set(30, 40, 50);
spotLight.intensity = 1;
scene.add(spotLight);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
// call the render function
var step = 0;
// setup the control gui
var controls = new function () {
// we need the first child, since it is a multimaterial
};
var gui = new dat.GUI();
/* 加載OBJLoader*/
var mesh;
var loader = new THREE.OBJLoader();
loader.load('fll.obj', function (loadedMesh) {
var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});
// loadedMesh is a group of meshes. For
// each mesh set the material, and compute the information
// three.js needs for rendering.
loadedMesh.children.forEach(function (child) {
child.material = material;
child.geometry.computeFaceNormals();
child.geometry.computeVertexNormals();
});
mesh = loadedMesh;
loadedMesh.scale.set(1, 1, 1);
loadedMesh.rotation.x = -0.3;
scene.add(loadedMesh);
});
render();
function render() {
stats.update();
if (mesh) {
mesh.rotation.y += 0.006;
mesh.rotation.x += 0.006;
// mesh.rotation.y+=0.006;
}
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init;
</script>
</body>
</html>
