[英]Three.js insert image
I am trying to attach a simple image on a PlaneGeometry Mesh but it doesn't seem to work. 我试图在PlaneGeometry Mesh上附加一个简单的图像,但它似乎不起作用。
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);
};
This is my full javascript file with a canvas of 580x300 这是我的完整javascript文件,画布为580x300
I only see a black square whenever I run it. 每当我跑步时,我只看到一个黑色的方块。 any ideas?
有任何想法吗? Thanks!
谢谢!
here is my reference for those who need it: 这是我对那些需要它的人的参考:
http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-texture-with-three-js/ http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-texture-with-three-js/
After downloading latest tag from github and playing with examples it became clear that the CORS is the one to blame. 从github下载最新标签并使用示例后,很明显CORS是应该受到责备的。 If I open the Chrome Developper Tools and look at the console there are many error messages:
如果我打开Chrome开发者工具并查看控制台,则会出现许多错误消息:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
If you are using Chrome, start it with flag -allow-file-access-from-files 如果您使用的是Chrome,请使用标记-allow-file-access-from-files启动它
Tested with Chrome 17.0.963.79. 使用Chrome 17.0.963.79进行测试。
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();
scene.add(camera); //ADDED
var img = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
map:THREE.ImageUtils.loadTexture('img/front.jpg')
});
img.map.needsUpdate = true; //ADDED
// 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);
};
Change the rotation of the Plane. 更改平面的旋转。
try this. 试试这个。
Plane.rotation.x = (-Math.PI / 2);
Plane.rotation.z = (-Math.PI / 2);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.