Three.js加载外部模型的教程详解

前端之家收集整理的这篇文章主要介绍了Three.js加载外部模型的教程详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. 首先我们要在官网: nofollow" href="https://threejs.org/">https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面

2. 创建three.js核心对象

  Scene(场景)

  Camera(相机)

  Light(光源)

  Mesh(模型)

  Renderer(渲染器)

  最后一步就是渲染显示在我们的页面上了renderer.render(scene,camera)

3. OBJ模型的导入

PS:three.js 外部模型加载json

用blender做模型可以直接导出json文件(导出插件可以从three.js包里找到)。从网上下载模型,网上的模型很多事3ds max做的,我就用3ds max把模型格式转换成obj,再导入blender处理好模型后导出json文件

导出json文件时选项勾选如果选择了SCENE可连灯光一同导出加载时需要用ObjectLoader

导出json文件时如果不勾选scene,需要页面添加灯光否则模型全黑,加载时用JSONLoader

总结

以上所述是小编给大家介绍的Three.js加载外部模型的教程详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/35264.html

猜你在找的JavaScript相关文章