Canvas Three.js和HTML5画布toDataURL
我正在尝试使用Three.js库将WebGL图像渲染到画布，然后在渲染后在该画布上使用toDataURL（）方法。 当我检查toDataURL中的字符串时，我得到的只是一个小球体，它是我场景中的光源，渲染的3D模型不会出现。 代码主要取自Three.js站点上的一个示例。 有没有办法在整个渲染实际完成后使用toDataURLCanvas Three.js和HTML5画布toDataURL,canvas,three.js,webgl,Canvas,Three.js,Webgl,我正在尝试使用Three.js库将WebGL图像渲染到画布，然后在渲染后在该画布上使用toDataURL（）方法。 当我检查toDataURL中的字符串时，我得到的只是一个小球体，它是我场景中的光源，渲染的3D模型不会出现。 代码主要取自Three.js站点上的一个示例。 有没有办法在整个渲染实际完成后使用toDataURL <script type="text/javascript"> var canvas = document.getElement
<script type="text/javascript">
var canvas = document.getElementById("drawing");
var hash;
var SCREEN_WIDTH = canvas.width;
var SCREEN_HEIGHT = canvas.height;
var container, stats;
var camera, scene, canvasRenderer, webglRenderer;
var loader;
var mesh, zmesh, lightMesh;
var directionalLight, pointLight;
var render_canvas = 1, render_gl = 1;
var has_gl = 0;
render_canvas = !has_gl;
function addMesh(geometry, scale, x, y, z, rx, ry, rz, material) {
mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(scale, scale, scale);
mesh.position.set(x, y, z);
mesh.rotation.set(rx, ry, rz);
scene.add(mesh);
}
function init() {
camera = new THREE.PerspectiveCamera(50, SCREEN_WIDTH
/ SCREEN_HEIGHT, 1, 100000);
camera.position.z = 1500;
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight(0x101010);
scene.add(ambient);
directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 2).normalize();
scene.add(directionalLight);
pointLight = new THREE.PointLight(0xffaa00);
pointLight.position.set(0, 0, 0);
scene.add(pointLight);
// light representation
sphere = new THREE.SphereGeometry(100, 16, 8, 1);
lightMesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
color : 0xffaa00
}));
lightMesh.scale.set(0.05, 0.05, 0.05);
lightMesh.position = pointLight.position;
scene.add(lightMesh);
if (render_gl) {
try {
webglRenderer = new THREE.WebGLRenderer({
canvas : canvas,
antialias : true,
alpha : true
});
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
has_gl = 1;
} catch (e) {
alert("browser Doesn't support webGL");
return;
}
}
loader = new THREE.BinaryLoader(true);
loader.load('/static/lucy/Lucy100k_bin.js', function(geometry,
materials) {
addMesh(geometry, 0.75, 900, 0, 0, 0, 0, 0,
new THREE.MeshPhongMaterial({
ambient : 0x030303,
color : 0x030303,
specular : 0x990000,
shininess : 30
}));
addMesh(geometry, 0.75, 300, 0, 0, 0, 0, 0,
new THREE.MeshFaceMaterial(materials));
addMesh(geometry, 0.75, -300, 0, 0, 0, 0, 0,
new THREE.MeshPhongMaterial({
ambient : 0x030303,
color : 0x111111,
specular : 0xffaa00,
shininess : 10
}));
addMesh(geometry, 0.75, -900, 0, 0, 0, 0, 0,
new THREE.MeshPhongMaterial({
ambient : 0x030303,
color : 0x555555,
specular : 0x666666,
shininess : 10
}));
});
}
function animate() {
requestAnimationFrame(animate);
webglRenderer.render(scene, camera);
}
init();
animate();
var dataurl = canvas.toDataURL();
</script>
var canvas=document.getElementById（“绘图”）；
var散列；
var SCREEN_WIDTH=canvas.WIDTH；
var SCREEN_HEIGHT=canvas.HEIGHT；
var容器，stats；
var摄影机、场景、画布渲染器、webglRenderer；
var装载机；
var网格、zmesh、lightMesh；
方向光、点光；
var render_canvas=1，render_gl=1；
var具有_gl=0；
渲染画布=！有"gl",；
函数addMesh（几何体、比例、x、y、z、rx、ry、rz、材质）{
网格=新的三个网格（几何体、材质）；
mesh.scale.set（比例、比例、比例）；
网格位置设置（x，y，z）；
网格旋转设置（rx，ry，rz）；
场景。添加（网格）；
}
函数init（）{
摄像机=新的三个透视摄像机（50，屏幕宽度
/屏幕高度，1，100000）；
摄像机位置z=1500；
场景=新的三个。场景（）；
//灯光
var环境光=新的三个环境光（0x101010）；
场景。添加（环境光）；
方向光=新的三个方向光（0xffffff，0.5）；
directionalLight.position.set（1,1,2）.normalize（）；
场景。添加（方向光）；
点光源=新的三点光源（0xffaa00）；
点光源位置设置（0,0,0）；
场景。添加（点光源）；
//光表示
球体=新的三个球体测量法（100,16,8,1）；
lightMesh=新的三点网格（球体，新的三点网格基本材质({
颜色：0xffaa00
}));
lightMesh.刻度设置（0.05,0.05,0.05）；
lightMesh.position=pointLight.position；
场景。添加（lightMesh）；
如果（渲染）{
试一试{
webglRenderer=new THREE.webglRenderer({
画布：画布，
反别名：是的，
阿尔法：是的
});
设置大小（屏幕宽度、屏幕高度）；
has_gl=1；
}捕获（e）{
警报（“浏览器不支持webGL”）；
返回；
}
}
加载器=新的3.BinaryLoader（真）；
loader.load（'/static/lucy/Lucy100k_bin.js'，函数（几何体，
（材料）{
addMesh（几何体，0.75900,0,0,0,0,0，
新三元网格材料({
环境温度：0x030303，
颜色：0x030303，
镜面反射：0x990000，
光泽度：30
}));
addMesh（几何体，0.75300,0,0,0,0,0，
新三、网面材料（材料））；
添加网格（几何体，0.75，-300,0,0,0,0,0，
新三元网格材料({
环境温度：0x030303，
颜色：0x111111，
镜面反射：0xffaa00，
光泽度：10
}));
添加网格（几何体，0.75，-900,0,0,0,0,0，
新三元网格材料({
环境温度：0x030303，
颜色：0x555555，
镜面反射：0x666666，
光泽度：10
}));
});
}
函数animate（）{
请求动画帧（动画）；
渲染（场景、摄影机）；
}
init（）；
制作动画（）；
var dataurl=canvas.toDataURL（）；
请看这里：好的，我知道了。我需要添加“preserveDrawingBuffer:true”和以将我的屏幕截图代码放在加载器回调函数的末尾。使用preserveDrawingBuffer选项创建WebGL上下文
var gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
var pixelData = new Uint8Array(width * height * 4);
gl.readPixels(left, top, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
console.log(pixelData);
请参阅仍不工作：/。。。我只得到了球体，其他的答案都不正确。这只是你的梦想