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

最新推荐文章于 2024-09-26 14:59:20 发布

玉念聿辉

最新推荐文章于 2024-09-26 14:59:20 发布

阅读量8.5k

点赞数 6

分类专栏：后台文章标签： Web3D three.js WebGL 数字孪生玉念聿辉

本文链接：https://blog.csdn.net/qq_35350654/article/details/115000006

版权

后台专栏收录该内容

19 篇文章 2 订阅

订阅专栏

文章目录

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);
	        fbx.traverse(function (item) {
	           if(item instanceof THREE.Mesh){
	               item.castShadow = true;
	               item.receiveShadow = true;
	           }
	        });
	        scene.add(fbx);
	    });
	    
    }

动画和渲染

 	//运行动画
    function animate() {
        requestAnimationFrame(animate); //循环调用函数
        renderer.render( 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.shadow.camera.near = 0.01;
        Sun.shadow.camera.far = 60;
        Sun.shadow.camera.top = 22;
        Sun.shadow.camera.bottom = -22;
        Sun.shadow.camera.left = -35;
        Sun.shadow.camera.right = 35;
        // //设置阴影分辨率
        Sun.shadow.mapSize.width = 2048;  // default
        Sun.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 
    });