Я пытаюсь прикрепить простое изображение к мешу PlaneGeometry, но это не работает.
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/