Javascript 在three.js中正确渲染模型的问题
我正在使用three.js尝试使用线框渲染模型,但遇到了问题。当我尝试渲染模型时,它是纯黑色。如果尝试将白色材质指定给模型,则不会产生任何效果。如果我尝试将模型的几何体和材质组合到网格中,然后在场景中渲染该网格,则会在three.js minified文件中出现f.makeGroups错误。完全错误是Javascript 在three.js中正确渲染模型的问题,javascript,three.js,mesh,Javascript,Three.js,Mesh,我正在使用three.js尝试使用线框渲染模型,但遇到了问题。当我尝试渲染模型时,它是纯黑色。如果尝试将白色材质指定给模型,则不会产生任何效果。如果我尝试将模型的几何体和材质组合到网格中,然后在场景中渲染该网格,则会在three.js minified文件中出现f.makeGroups错误。完全错误是 TypeError: f.makeGroups is not a function 我用于呈现此内容的代码如下所示: var SCREEN_WIDTH = 800; var SC
TypeError: f.makeGroups is not a function
我用于呈现此内容的代码如下所示:
var SCREEN_WIDTH = 800;
var SCREEN_HEIGHT = 600;
var blue = 0x03106D;
var white = 0xFFFFFF;
var black = 0x000000;
var orange = 0xFF6600;
// this function is executed on each animation frame
function animate(){
// render
renderer.render(scene, camera);
// request new frame
requestAnimationFrame(function(){
animate();
});
}
// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setClearColor(0xFFFFFF, 1);
document.body.appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1000);
camera.position.z = 700;
var facemat = new THREE.MeshBasicMaterial( { color: white, opacity: 1.0, shading: THREE.FlatShading } );
var wiremat = new THREE.MeshBasicMaterial( { color: blue, opacity: 1.0, wireframe: true, wireframeLinewidth: 1.0 } );
var Material = [facemat,wiremat];
// scene
var scene = new THREE.Scene();
// cube
var vrmlLoader = new THREE.VRMLLoader();
vrmlLoader.addEventListener('load', function (event) {
var object = event.content;
var mesh = new THREE.Mesh(object, Material);
scene.add(mesh);
});
vrmlLoader.load("ship.wrl");
// start animation
animate();
我还确认我的模型正在使用
var mesh=new THREE.mesh(object,[facemat,wiremat])
?是你编的吗?:)不能将数组作为材质传递。我想WebGLRenderer
可以提供更好的错误消息,不过
此外,我已经多次看到这种模式(我想知道它从何而来?)
应该是这样的:
function animate(){
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
function animate(){
renderer.render(scene, camera);
requestAnimationFrame(animate);
}