[英]How can i put image in Three.js texture
我正在嘗試在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;
如果場景中沒有燈光,則可能是問題所在。 至少添加一些環境光。 例如:
var ambient = new THREE.AmbientLight( 0x555555 );
scene.add( ambient );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.