我正在尝试将一张简单的图片附加到平面几何体网格上,但似乎无法正常工作。
window.onload = function(){
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = -250;
camera.position.z = 400;
camera.rotation.x = 45 * (Math.PI / 180);
// scene
var scene = new THREE.Scene();
var img = new THREE.MeshLambertMaterial({
map:THREE.ImageUtils.loadTexture('img/front.jpg')
});
// plane
var plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200),img);
plane.overdraw = true;
scene.add(plane);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight);
// add directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// create wrapper object that contains three.js objects
var three = {
renderer: renderer,
camera: camera,
scene: scene,
plane: plane
};
renderer.render(scene,camera);
};
这是我的完整 JavaScript 文件,带有一个大小为 580x300 的画布。
每当我运行它时,我只能看到一个黑色正方形。有什么想法吗?谢谢!
以下是需要的参考资料:
http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-texture-with-three-js/
THREE.ImageUtils.loadTexture
已经被弃用,建议使用new THREE.TextureLoader().load
替代。 - Tyler Crompton