Question

我正在尝试向旋转的立方体中添加纹理，但是我不知道问题出在哪里！出现多维数据集，但没有纹理。试图也改变颜色，但不会改变。我在这方面太新了。所以请提出建议。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 30, window.innerWidth/window.innerHeight, 0.1, 1000 );
// mouse controls
var controls = new THREE.OrbitControls( camera );
controls.autoRotate = true;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// add cube
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x0fff10} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

// load a texture, set wrap mode to repeat
var texture = new THREE.TextureLoader().load( "http://packageonly.tk/1.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );

camera.position.z = 10;

var render = function () {
  requestAnimationFrame( render );

  controls.update();
  renderer.render(scene, camera);
};

render();

<!DOCTYPE html>
<html>
<head>
	<title>EX3</title>
	<script src="http://packageOnly.tk/three.min.js"></script> 
	<script src="http://packageOnly.tk/OrbitControls.js"></script>

</head>
<body>
	
	<script src="js/js.js"></script>
</body>
</html>

Answer 1

您需要在material.map属性上设置纹理：

// ...

// load a texture, set wrap mode to repeat
var texture = new THREE.TextureLoader().load( "http://packageonly.tk/1.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );

// NOTE: Set the texture map to use on the material
material.map = texture;

camera.position.z = 10;

// ...

希望有帮助！

Answer 2

您将需要解决纹理的跨域问题。但是大概应该是这样的（还要注意，你没有任何灯）：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 30, window.innerWidth/window.innerHeight, 0.1, 1000 );
// mouse controls
var controls = new THREE.OrbitControls( camera );
controls.autoRotate = true;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


// load a texture, set wrap mode to repeat
var loader = new THREE.TextureLoader();
loader.crossOrigin = '';
var texture = loader.load( "http://packageonly.tk/1.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );

// add cube
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshPhongMaterial( {map:texture, specular: 0xFFFFFF,
    shininess: 30,} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

let light1 = new THREE.PointLight(0xeeffee, 0.8);
    light1.position.set(-5, 2, 2);
    scene.add(light1);
    
let light2 = new THREE.PointLight(0xffeeff, 0.8);
    light2.position.set(5, 2, -2);
    scene.add(light2);    


camera.position.z = 10;

var render = function () {
  requestAnimationFrame( render );

  controls.update();
  renderer.render(scene, camera);
};

render();

<!DOCTYPE html>
<html>
<head>
	<title>EX3</title>
	<script src="http://packageOnly.tk/three.min.js"></script> 
	<script src="http://packageOnly.tk/OrbitControls.js"></script>

</head>
<body>
	
	<!-- script src="js/js.js"></script -->
</body>
</html>

旋转立方体纹理

2 个答案: