3dsmax模型创建+原生贴图

模型创建请参考另一篇我的文章
3dsmax 模型创建+原生贴图(多图)
为何要原生贴图？
因为three.js只支持原生贴图的obj/mtl文件

obj/mtl导出

Three.js

完整代码
链接：https://pan.baidu.com/s/1xmR-i7Q_k3Gv_WN2le3NyA 密码：luti
其中的html代码

<!DOCTYPE html>
<html>
<head><title>Example 09.04 - Trackball controls </title><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript" src="libs/OBJLoader.js"></script><script type="text/javascript" src="libs/MTLLoader.js"></script><script type="text/javascript" src="libs/OBJMTLLoader.js"></script><script type="text/javascript" src="libs/stats.js"></script><script type="text/javascript" src="libs/dat.gui.js"></script><script type="text/javascript" src="libs/chroma.js"></script><script type="text/javascript" src="libs/TrackballControls.js"></script><style>body {/* set margin to 0 and 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 clock = new THREE.Clock();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're looking at.var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// create a render and set the sizevar webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0xffffff, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;// position and point the camera to the center of the scenecamera.position.x = 100;camera.position.y = 100;camera.position.z = 300;camera.lookAt(new THREE.Vector3(0, 0, 0));var trackballControls = new THREE.TrackballControls(camera);trackballControls.rotateSpeed = 1.0;trackballControls.zoomSpeed = 1.0;trackballControls.panSpeed = 1.0;
//      trackballControls.noZoom=false;
//      trackballControls.noPan=false;trackballControls.staticMoving = true;
//      trackballControls.dynamicDampingFactor=0.3;var ambientLight = new THREE.AmbientLight(0x383838);scene.add(ambientLight);// add spotlight for the shadowsvar spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(300, 300, 300);spotLight.intensity = 1;scene.add(spotLight);// add the output of the renderer to the html elementdocument.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);// call the render functionvar step = 0;// setup the control guivar controls = new function () {// we need the first child, since it's a multimaterial};var gui = new dat.GUI();var mesh;var loader = new THREE.OBJMTLLoader();var load = function (object) {var scale = chroma.scale(['red', 'green', 'blue']);setRandomColors(object, scale);mesh = object;scene.add(mesh);};//var texture = THREE.ImageUtils.loadTexture('assets/textures/3d66Model-512897-files-2.jpg');//texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;loader.load('assets/models/15.obj', 'assets/models/15.mtl', load);//texture.repeat.set( 1 , 1);function setCamControls() {}render();function setRandomColors(object, scale) {var children = object.children;if (children && children.length > 0) {children.forEach(function (e) {setRandomColors(e, scale)});} else {// no children assume contains a meshif (object instanceof THREE.Mesh) {object.material.color = new THREE.Color(0xCCCCCC);if (object.material.name.indexOf("building") == 0) {object.material.emissive = new THREE.Color(0x444444);object.material.transparent = false;object.material.opacity = 0.8;}}}}function render() {stats.update();var delta = clock.getDelta();if (mesh) {//   mesh.rotation.y+=0.006;}trackballControls.update(delta);//webGLRenderer.clear();// render using requestAnimationFramerequestAnimationFrame(render);webGLRenderer.render(scene, camera)}function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: ms// Align top-leftstats.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>

直接更改mtl文件

两个文件只差最后两行代码
直接修改文件名，进行贴图更改，也是可以的

3dsmax 模型创建+原生贴图+obj/mtl+three.js 实现WEB3D相关推荐

3dsmax 模型创建+原生贴图(多图)
3dsmax模型创建+原生贴图创建一个球体打开材质及贴图功能(快捷键M) 选择材质球(随便选一个圆球) 选择标准材质(Standard) 选择贴图(Maps) 勾选漫反射(Diffuse Colo ...
Threejs渲染obj+mtl模型源码，3D工厂模型
1,介绍 Threejs实现引入工厂模型,加载obj+mtl模型源码下载,可用于学习研究,二次开发 2,部分代码 // 创建一个场景,它将包含我们所有的元素,如物体,相机和灯光. var scene ...
threejs+vue房子模型，实现BSP模型剪切，导入obj+mtl文件
threejs版本选择 "dependencies": {"@types/three": "^0.126.1", "three&q ...
3DsMax 创建阴影贴图的技术指南
创建阴影贴图的技术指南概述过程步骤 1 步骤 2 步骤 3 步骤 4 步骤 5 步骤 6 步骤 7 步骤 8 步骤 9 步骤 10 步骤 11 步骤 12 步骤 13 步骤 14 概述这里是一 ...
three.js 加载obj+mtl模型
本文提供了three.js中实现将obj+mtl模型加载到场景中的方法. 我们欲实现将桥模型加载到场景中,并对桥设置透明度: 实现过程: 分别导入three.js中的OBJLoader,MTLLo ...
THREEJS导入外部OBJ+MTL后内存优化
背景近期做一个关于石油化工的3D数字孪生项目,模型均为客户那边提供,模型文件是obj+mtl+jpg组合.因为有较多局部控制动画,所以建模被要求拆分成多个obj模型,然后在场景中自动组合使用. 现象 ...
从C4D建模到Three.js实现闹钟产品360度展示效果(.stl,.obj,.mtl)
演示地址:https://capricorncd.github.io/blog/dist/three/index.html#/ClockObj 源码:https://github.com/capric ...
python-igraph创建网络（图）
python-igraph创建网络(图) 1.网络布局 2.显示网络 3.保存网络 4.创建网络未完待续 igraph包含了很多创建网络和显示网络的功能,后面专门讲述绘制网络功能,这边为了查看方便, ...
教学|3DsMAX怎么样制作环境贴图，3D建模步骤教程
3DsMAX怎么样制作环境贴图?下面翼狐网小编为大家分享一篇3DsMAX制作环境贴图的教程,教程主要通过给窗户外添加环境背景的案例来详细介绍3DsMAX环境贴图制作的技巧,这篇教程很基础,难度低,需要 ...

3dsmax 模型创建+原生贴图+obj/mtl+three.js 实现WEB3D

3dsmax模型创建+原生贴图

obj/mtl导出

Three.js

直接更改mtl文件

3dsmax 模型创建+原生贴图+obj/mtl+three.js 实现WEB3D相关推荐

最新文章

热门文章