En el proceso de creación y escritura del programa three.js, por supuesto, inevitablemente habrá un problema
Importación de modelos 3D
El modelo 3D se compone de vértices. Los vértices están conectados para formar un triángulo o cuadrilátero (en un plano). Múltiples triángulos o cuadriláteros pueden formar un modelo tridimensional complejo.
Aunque three.js puede usar las figuras geométricas proporcionadas para apilar un modelo 3D, pero el nivel de arte del autor está lejos de ser adecuado, se pueden comparar los siguientes modelos
Modelos 3D encontrados en línea
Modelo 3D hecho por ti mismo
El modelo 3D puede hacer que las escenas que hacemos sean más expresivas, y algunas escenas se pueden importar directamente a través del modelo 3D para evitar la repetitividad causada por volver a dibujar
En la actualidad, el software para buscar modelos 3D en Internet básicamente recomienda 3D Max. Sin embargo, 3D max es un software de creación de modelos más grande. Si los requisitos de implementación no son altos, puede intentar utilizar ParaView en su lugar. Incluso puede utilizar el visor 3D integrado y Draw 3D en Windows, pero los dos últimos tienen algunas restricciones sobre los requisitos de formato de su modelo 3D.
Sitio web oficial de ParaView
Dibujo 3D
Importación de modelos 3D
Modelo: stanford-bunny.fbx
comparte dos modelos: Baidu
Netdisk Código de extracción: b33z
El modelo de conejo también se puede encontrar en el ejemplo de tres carpetas.
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../函数式编程/textbook/js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
<script src="js/OBJLoader.js" type="text/javascript" charset="utf-8"></script>
<script src="js/FBXLoader.js" type="text/javascript" charset="utf-8"></script>
<script src="js/inflate.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000);
render = new THREE.WebGLRenderer();
render.setPixelRatio(window.devicePixelRatio);
render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app");
app.appendChild(render.domElement);
/********************************************************/
// 加载提示
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total){
console.log(item, loaded, total);
};
var onProgress = function(xhr){
if(xhr.lengthComputable){
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function(xhr){
console.error(xhr);
};
var loader = new THREE.FBXLoader();//创建一个FBX加载器
var model, self = this ;
loader.load("./modules/stanford-bunny.fbx", function(obj) {
console.log(obj);//查看加载后返回的模型对象
obj.scale.multiplyScalar(0.0003); //缩小模型
self.model = obj;
scene.add(self.model)
animate();
}, onProgress, onError)
// 光源
var point = new THREE.PointLight("white", 10, 100);
point.position.set(40, 30, 30);
scene.add(point);
camera.position.set(20, 20, 30);
// 坐标轴
var axisHelper = new THREE.AxisHelper(100);
scene.add(axisHelper)
// 鼠标控件
var controls = new THREE.OrbitControls(camera, render.domElement); //创建控件对象
/********************************************************/
function animate() {
self.model.rotation.y += 0.03;
controls.update();
render.render(scene, camera);
window.requestAnimationFrame(animate);
}
</script>
</body>
</html>
efecto:
