在three.js中正确渲染模型的问题

Problems properly rendering model in three.js

本文关键字：模型 问题 three js      更新时间：2023-09-26

我正在使用three.js尝试用线框渲染模型全白，但我遇到了问题。当我尝试渲染模型时，它是纯黑色的。如果我尝试分配一个白色的材料模型，没有效果。如果我试图将模型的几何形状和材料组合成网格，然后在场景中渲染，我就会在three.js缩小文件中出现f.makeGroups错误。完整的错误是

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();

我也确认了我的模型正在使用three.js编辑器

var mesh = new THREE.Mesh( object, [facemat,wiremat] ) ?你瞎编的?:)你不能传递一个数组作为材料。我想WebGLRenderer可以给出更好的错误信息…

而且，我已经见过这种模式几次了(我想知道它是从哪里来的?):

function animate(){
    renderer.render(scene, camera);
    requestAnimationFrame(function(){
    animate();
    });
}

应该是这样的:

function animate(){
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}
相关文章：