[英]Problems properly rendering model in three.js
I am using three.js to attempt to render a model full white with wireframe, but I am running into problems. 我正在使用three.js尝试使用线框将模型渲染为全白,但是我遇到了问题。 When I attempt to render the model, it is solid black. 当我尝试渲染模型时,它是纯黑色的。 If I attempt to assign a white material to the model, there is no effect. 如果我尝试为模型分配白色材质,则没有任何效果。 If I attempt to combine the geometry of the model and a material into a mesh, and then render that in a scene, I am presented with a f.makeGroups error from within the three.js minified file. 如果我尝试将模型的几何形状和材料组合成网格,然后在场景中进行渲染,则会在3.js缩小文件中看到f.makeGroups错误。 The complete error is 完整的错误是
TypeError: f.makeGroups is not a function
The code I am using to render this is as follows: 我用来渲染此代码如下:
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();
I have also confirmed my model is working using the three.js editor 我还确认我的模型正在使用three.js编辑器工作
var mesh = new THREE.Mesh( object, [facemat,wiremat] )
? var mesh = new THREE.Mesh( object, [facemat,wiremat] )
吗? You made that up? 你编造的吗? :) You can't pass an array as a material. :)您不能将数组作为材料传递。 I guess WebGLRenderer
could give better error messages though... 我想WebGLRenderer
可能会给出更好的错误消息...
Also, I've seen this pattern a coupe of times already (I wonder where it comes from?): 另外,我已经看到这种模式了很多次(我想知道它是从哪里来的?):
function animate(){
renderer.render(scene, camera);
requestAnimationFrame(function(){
animate();
});
}
It should be just this: 应该是这样的:
function animate(){
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.