我从THREE.js开始,尝试绘制一个矩形,上面有一个纹理,由单一光源照明。我认为这很简单(为简洁起见,省略了HTML):
function loadScene() {
var world = document.getElementById('world'),
WIDTH = 1200,
HEIGHT = 500,
VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000,
renderer = new THREE.WebGLRenderer(),
camera = new THREE.Camera(VIEW_ANGLE, ASPECT, NEAR, FAR),
scene = new THREE.Scene(),
texture = THREE.ImageUtils.loadTexture('crate.gif'),
material = new THREE.MeshBasicMaterial({map: texture}),
// material = new THREE.MeshPhongMaterial({color: 0xCC0000});
geometry = new THREE.PlaneGeometry(100, 100),
mesh = new THREE.Mesh(geometry, material),
pointLight = new THREE.PointLight(0xFFFFFF);
camera.position.z = 200;
renderer.setSize(WIDTH, HEIGHT);
scene.addChild(mesh);
world.appendChild(renderer.domElement);
pointLight.position.x = 50;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.addLight(pointLight);
renderer.render(scene, camera);
}
问题是,我什么也看不见。如果我更改材质并使用注释的材质,就会出现一个正方形。请注意,
我做错了什么?
发布于 2011-10-28 17:13:17
加载图像时,渲染器已经绘制了场景,因此为时已晚。解决之道就是改变
texture = THREE.ImageUtils.loadTexture('crate.gif'),
转到
texture = THREE.ImageUtils.loadTexture('crate.gif', {}, function() {
renderer.render(scene);
}),
发布于 2012-06-12 00:18:24
Andrea的解决方案是绝对正确的,我将基于同样的想法编写另一个实现。如果您查看了THREE.ImageUtils.loadTexture() source,您会发现它使用了javascript Image对象。$(window).load事件在加载完所有图像后触发!所以在这种情况下,我们可以用已经加载的纹理来渲染我们的场景…
$(文档).ready -> THREE.MeshLambertMaterial=新窗口(贴图: THREE.ImageUtils.loadTexture("crate.gif")) THREE.MeshLambertMaterial=新窗口(新窗口(半径、线段、环),材质)$(窗口).load -> renderer.render scene,camera
$(document).ready(function() {THREE.MeshLambertMaterial=新材质({ map: THREE.ImageUtils.loadTexture("crate.gif") });sphere =新材质(新THREE.SphereGeometry(半径,线段,圆环),材质);$(window).load(function() {renderer.render(场景,摄像头);});});
谢谢..。
发布于 2016-03-20 23:45:59
在three.js的r75版本中,您应该使用:
var loader = new THREE.TextureLoader();
loader.load('texture.png', function ( texture ) {
var geometry = new THREE.SphereGeometry(1000, 20, 20);
var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
https://stackoverflow.com/questions/7919516
复制相似问题