Three.js插入图像
Three.js insert image
我试图在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/
从github下载最新标签并播放示例后,很明显CORS是罪魁祸首。如果我打开Chrome开发工具并查看控制台,会出现许多错误消息:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
如果您正在使用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);
};
更改平面的旋转。
试试这个。
Plane.rotation.x = (-Math.PI / 2);
Plane.rotation.z = (-Math.PI / 2);
相关文章:
- 预加载图像并插入DOM
- 使用formData使用ajax将图像插入数据库
- 在其他图像下使用javascript将图像插入html
- 使用javascript将图像插入pdf(Adobe Acrobat Pro)中
- 无法使用ajax序列化功能将图像插入数据库
- 将捕获的图像插入数据库问题(Cordova/SQlite/JavaScript)
- Jquery将图像插入到HTML表中
- 将base64编码的图像插入iOS版Wikitude SDK中的AR.ImageResource
- 使用 XSJS 将图像插入到 SAP HANA 表
- 如何使用 JavaScript 将图像插入 alertify.js alert
- 将图像插入 Outlook 中
- html画布:将多个图像插入到单独的画布中
- 使用谷歌脚本,如何将图像插入表格单元格
- 将数据库mysql中的文件图像插入excel
- 是否可以在渲染前将图像插入缓存
- 在 Javascript 中将图像插入表格单元格
- 将织物图像插入画布
- 是否可以将SVG图像插入到已经呈现在页面上的现有SVG元素中?
- tinymce图像插入,第二次工作,但不是第一次
- 更改url深度与TinyMCE图像插入