旋转立方体纹理

我试图在我的旋转立方体上添加纹理，但我不知道问题在哪里！立方体出现，但质地却没有。也试图改变颜色，但不会改变。我很新。所以请告知

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>

您需要在材料上设置纹理。映射属性：

// ...
// 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;
// ...

希望有帮助！

您将需要修复纹理的交叉原始问题。但是大约应该这样（也请注意，您没有任何灯）：

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>

相关内容

最新更新

热门标签：