Как я могу поместить изображение в текстуру Three.js

Я пытаюсь поместить текстуру в объект Three.js, но когда я применяю изображение, объект становится черным. Некоторые предупреждения отображаются в коде, но ошибок нет. Изображение выше показывает результаты. Некоторые советы, пожалуйста?Как я могу поместить изображение в текстуру 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;

источник

2016-05-15 Mauricio Menandro

Вы добавили свет в сцену? Если нет, phongmaterial wal будет отображаться в черном, точно так же, как объект в совершенно темной комнате. – yomotsu

Если у вас нет никакого света в сцене, это, вероятно, проблема. Добавьте по крайней мере некоторый окружающий свет. Например:

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

источник

2016-05-16 22:48:47

Большое спасибо ... :) –

Как я могу поместить изображение в текстуру Three.js

ответ

Смежные вопросы