Question

我正在尝试在我的场景中加载ctm模型但是我有以下错误：

geometry.computeOffsets不是函数

我将代码分为2个文件：1个html文件和1个js文件，其中包含用于创建场景和加载ctm模型的代码。

我的html文件如下：

<!DOCTYPE html>

<head>

    <title>Basic template</title>
    <style>canvas { width: 100%; height: 100% }</style>



    <script src="../lib/three.min.js"></script>
    <script src="../lib/Detector.js"></script>
    <script src="../lib/Coordinates.js"></script>
    <script src="../lib/OrbitAndPanControls.js"></script>
    <script src="../lib/TrackballControls.js"></script>
    <script src="../lib/stats.min.js"></script>


    <script src="js/loaders/ctm/lzma.js"></script>
    <script src="js/loaders/ctm/ctm.js"></script>
    <script src="js/loaders/ctm/CTMLoader.js"></script>


</head>

<body>

<script src="js/loaders/ctm/ctm_loader_house.js"></script>

</body>

我的javascriptfile ctm_loader_house.js：

var camera, scene,s, renderer;
var cameraControls;
var clock = new THREE.Clock();


// LOADER
function callbackModel( geometry, s, material, x, y, z, rx, ry ) {

            var mesh = new THREE.Mesh( geometry, material );

            mesh.position.set( x, y, z );
            mesh.scale.set( s, s, s );
            mesh.rotation.x = rx;
            mesh.rotation.z = ry;

            mesh.castShadow = true;
            mesh.receiveShadow = true;

            scene.add( mesh );

        }

function init() {


// SCENE

scene = new THREE.Scene();


// LIGHTS

scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
scene.add( light );

light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( -400, 200, -300 );
scene.add( light );


//CAMERA 

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;

camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 800;


// RENDERER

renderer = new THREE.WebGLRenderer();
renderer.setSize( canvasWidth, canvasHeight );
document.body.appendChild( renderer.domElement );

cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set( 0, 0, 0 );


// LOADER



function checkTime() {
    var c = 0, 
    var s = Date.now();
    c ++;s= Date.now();

    if ( c === 3 ) {

        var e = Date.now();
        console.log( "Total parse time: " + (e-s) + " ms" );

    }

}

var loader = new THREE.CTMLoader();



loader.load( "models/ctm/ModernGlass-House_simplify.ctm",  function( geometry ) {

    var material1 = new THREE.MeshLambertMaterial( { color: 0xffffff } );

    //callbackModel( geometry, scale , material, position x,position y,position z, rotation x, rotation y )
    callbackModel( geometry, 0.1, material1, 0, 0, 0, -1.57, 1.57 );


    checkTime();

}, { useWorker: true } );


//AXIS

Coordinates.drawGround({size:10000});
Coordinates.drawGrid({size:1000,scale:0.01});
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"y"});
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
}



function render() {
var delta = clock.getDelta();
requestAnimationFrame(render);
cameraControls.update(delta);
renderer.render(scene, camera);
}


init();
render();

非常感谢任何帮助。

Answer 1

谢谢@WestLangley，我明白了。这是代码。

var camera, scene,s, controls, renderer;
var cameraControls;
var clock = new THREE.Clock();

function callbackModel( geometry, s, material, x, y, z, rx, ry ) {

            var mesh = new THREE.Mesh( geometry, material );

            mesh.position.set( x, y, z );
            mesh.scale.set( s, s, s );
            mesh.rotation.x = rx;
            mesh.rotation.z = ry;

            mesh.castShadow = true;
            mesh.receiveShadow = true;

            scene.add( mesh );

        }

function init() {


// SCENE

scene = new THREE.Scene();


// LIGHTS

scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
scene.add( light );

light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( -400, 200, -300 );
scene.add( light );


//CAMERA 

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;

camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight,    1, 2000 );
camera.position.z = 800;
controls = new THREE.OrbitControls( camera );



// RENDERER

renderer = new THREE.WebGLRenderer();
renderer.setSize( canvasWidth, canvasHeight );
document.body.appendChild( renderer.domElement );




// LOADER

var c = 0, s = Date.now();

function checkTime() {

    c ++;s= Date.now();

    if ( c === 3 ) {

        var e = Date.now();
        console.log( "Total parse time: " + (e-s) + " ms" );

    }

}

var loader = new THREE.CTMLoader();



loader.load( "models/ctm/ModernGlass-House_simplify.ctm",  function( geometry ) {

    var material1 = new THREE.MeshLambertMaterial( { color: 0xffffff } );

    //callbackModel( geometry, scale , material, position x,position y,position z, rotation x, rotation y )
    callbackModel( geometry, 0.1, material1, 0, 0, 0, -1.57, 1.57 );


    checkTime();

}, { useWorker: true } );



}




function animate() {

requestAnimationFrame( animate );

controls.update();

render();


}

function render() {

renderer.render( scene, camera );

}

init();
animate();

ctm loader ERROR geometry.computeOffsets不是函数

1 个答案: