Web3D项目中three.js加载FBX模型变黑和透明背景问题

Web3D项目中three.js加载FBX模型变黑和透明背景问题

文章目录

• • • three.js加载模型
    • • 添加关联的js文件
      • 初始化渲染器
      • 初始化场景
      • 初始化相机
      • 初始化操控插件
      • 模型加载
      • 动画和渲染
    • FBX模型变黑问题
    • 设置透明背景
    • THE END
    • three.js加载模型

three.js加载模型

       为了开头不显得那么生硬，这里我们先来看一下3D模型的加载。在three.js加载模型中，需要经历以下几个步骤。

添加关联的js文件

<script th:src="@{/web3d/js/three.js}"></script>
<script th:src="@{/web3d/js/libs/inflate.min.js}"></script>
<script th:src="@{/web3d/js/FBXLoader.js}"></script>
<script th:src="@{/web3d/js/OrbitControls.js}"></script>

初始化渲染器

    //初始化渲染器function initRenderer() {renderer = new THREE.WebGLRenderer(); //实例化渲染器renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高document.body.appendChild(renderer.domElement); //添加到dom}

初始化场景

    //初始化场景function initScene() {scene = new THREE.Scene(); //实例化场景}

初始化相机

	//初始化相机function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机camera.position.set(0, 0, 15);}

初始化操控插件

//初始化操控插件
function initOrbitControls() {let control = new THREE.OrbitControls(camera, document.querySelector("#cc"));
}

模型加载

	//加载FBX模型function load_Fbx() {var loader = new THREE.FBXLoader();loader.load('../FBX/outdoor.FBX', function (fbx) {fbx.scale.set(.1,.1,.1);averse(function (item) {if(item instanceof THREE.Mesh){item.castShadow = iveShadow = true;}});scene.add(fbx);});}

动画和渲染

 	//运行动画function animate() {requestAnimationFrame(animate); //循环调用函数der( scene, camera ); //渲染界面}

FBX模型变黑问题

       本着自己对Ctrl+c和Ctrl+v的熟练，我原以为这样就可以轻松的把自己辛辛苦苦从网上复制过来的模型加载出来，可实际却是…

       WK，我的模型明明是发光、颜色、贴图等都已经做好的啊，这也太黑了吧。好在我多年从事IT行业的经验告诉我，肯定是Ctrl+c出了问题，至于是Ctrl还是c的问题，还请继续跟我往下看。

	//初始化模型相关参数function ini_Fbx(){//给场景增加环境光let Ambient = new THREE.AmbientLight(0x404040, 2);scene.add(Ambient);//给场景添加太阳光let Sun = new THREE.DirectionalLight(0xffffff, 1);Sun.position.set(20, 20, 20);Sun.castShadow = true;//设置相机渲染面积Sun.ar = 0.01;Sun.shadow.camera.far = 60;Sun.p = 22;Sun.shadow.camera.bottom = -22;Sun.shadow.camera.left = -35;Sun.shadow.camera.right = 35;// //设置阴影分辨率Sun.shadow.mapSize.width = 2048;  // defaultSun.shadow.mapSize.height = 2048; // default//阴影限制Sun.shadow.radius = 1;scene.add(Sun);}

       看到这里我才发现，原来是我错怪了多年跟我的Ctrl和c兄，太黑?不存在的，给他点颜色看看就好了。

设置透明背景

       我的模型总算是加载出来了，那么透明背景又是怎么回事？请看下面两张对比图就知道了。

       细心的朋友应该发现了，设置透明背景是为了能显示自己3D模型后面的背景图片，那么具体又是怎么实现的呢？请看我Ctrl和c兄带来的表演。

	//关键是 alpha: true let renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#cc"),antialias: true, alpha: true });

THE END

three.js加载模型

感谢查阅
玉念聿辉：编辑