kpeng163 2022-04-02 14:33 采纳率: 50%
浏览 420

three.js 使用TextureLoader进行map贴图显示黑色

初学three.js,学习加载贴图的时候,按官方文档总是显示黑色的,网上查了查,说TextureLoader(),是异步加载,代码调整后还是一样,显示黑色。
完整代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第一个three.js文件_WebGL三维场景</title>
 
    <!--引入three.js三维引擎-->
    <script src="three/three.js-r117/build/three.js"></script>
  
</head>

<body>

    <script>
        /**
        * 创建场景对象Scene
        */
        var scene = new THREE.Scene();
        var camera;
        var renderer = new THREE.WebGLRenderer();
        var textureLoader = new THREE.TextureLoader().load("0_0.png", function (texture) {
            var geometry = new THREE.PlaneGeometry(300, 300);//创建一个矩形
            var material = new THREE.MeshLambertMaterial({
                map: texture
            }); //材质对象Material
            var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
            scene.add(mesh); //网格模型添加到场景中
           
        
            //环境光
            var ambient = new THREE.AmbientLight(0xffffff);
            scene.add(ambient);
            /**
             * 相机设置
             */
            var width = window.innerWidth; //窗口宽度
            var height = window.innerHeight; //窗口高度
            var k = width / height; //窗口宽高比
            var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
            //创建相机对象
             camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
            //var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight, 1, 1000);
            camera.position.set(0, 0, 700); //设置相机位置
            camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
            /**
             * 创建渲染器对象
             */
           
            renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
            document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
            renderer.render(scene, camera);//执行渲染操作
         
        });
       

     
       
    </script>
</body>
</html>

显示效果:

img

原图:

img

请问,问题出在哪里?

  • 写回答

1条回答 默认 最新

  • Zombie391 2022-04-02 15:58
    关注

    路径对? 报错了? 看看后台 图片获取到了? 创建一个plane的时候 先给material颜色 双面显示 再设置贴图 先找对自己的问题

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 4月2日

悬赏问题

  • ¥15 Qt下使用tcp获取数据的详细操作
  • ¥15 idea右下角设置编码是灰色的
  • ¥15 全志H618ROM新增分区
  • ¥20 jupyter保存图像功能的实现
  • ¥15 在grasshopper里DrawViewportWires更改预览后,禁用电池仍然显示
  • ¥15 NAO机器人的录音程序保存问题
  • ¥15 C#读写EXCEL文件,不同编译
  • ¥15 MapReduce结果输出到HBase,一直连接不上MySQL
  • ¥15 扩散模型sd.webui使用时报错“Nonetype”
  • ¥15 stm32流水灯+呼吸灯+外部中断按键