如何将图像放入 Three.js 纹理答案

【问题标题】：How can i put image in Three.js texture如何将图像放入 Three.js 纹理
【发布时间】：2016-05-17 06:48:47
【问题描述】：

我正在尝试将纹理放入 Three.js 对象中，但是当我应用图像时，对象变为全黑。一些警报显示在代码上，但没有错误。上图显示结果。请给点建议好吗？

    <!DOCTYPE html>
<html>
<head>

<title>Meu Primeiro WebGL</title>
    <style type="text/css">canvas {width: 100%; height: 100%}</style>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>
<body>
<script src="three.js"></script>


<script>
       var scene = new THREE.Scene();
       var loader = new THREE.ImageLoader();

            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            //primeiro cubo
            var cubegeometry = new THREE.CubeGeometry(5,0.45,5);
            var cubematerial = new THREE.MeshBasicMaterial({wireframe: false, color: 0x0033FF});
            var cube = new THREE.Mesh(cubegeometry, cubematerial);



            //segundo objeto 
            var texture = THREE.ImageUtils.loadTexture('wood.jpg');
            var cbmaterial = new THREE.MeshPhongMaterial({map: texture});
            var cbgeometry = new THREE.CubeGeometry(5.05,0.5,3.75);

            var cb = new THREE.Mesh(cbgeometry, cbmaterial);



            scene.add(cube);
            scene.add(cb);
            camera.position.z = 6

            var render = function(){
                requestAnimationFrame(render);

                cube.rotation.y += 0.02;
                cube.rotation.x += 0.01;
                cube.rotation.z += 0.00;

【问题讨论】：

您是否在场景中添加了灯光？如果没有，phongmaterial 将被渲染为黑色，就像一个完全黑暗的房间里的物体一样

标签： javascript three.js textures

【解决方案1】：

如果场景中没有任何灯光，那可能就是问题所在。添加至少一些环境光。例如：

var ambient = new THREE.AmbientLight( 0x555555 );
scene.add( ambient );

【讨论】：