Question

你好，我只想显示一个带有三个js且没有摄像头的对象，而标记只是空白的背景和该对象我尝试从损坏头盔示例中选择一部分代码，但没有任何效果：/我只想要一个简单的东西。

现在我有以下代码：

function start(){

    var renderer    = new THREE.WebGLRenderer({
        antialias : true,
        alpha: true
    });
    //renderer.setClearColor(new THREE.Color('lightgrey'), 0)
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.domElement.style.position = 'absolute'
    renderer.domElement.style.top = '0px'
    renderer.domElement.style.left = '0px'
    document.body.appendChild( renderer.domElement );

    // array of functions for the rendering loop
    var onRenderFcts = [];

    // init scene
    var scene = new THREE.Scene();

    // Create a camera
    var camera = new THREE.Camera();
    scene.add(camera);

    // Create a light
    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 0, 1);
    scene.add(light);


    var loader = new THREE.OBJLoader();

    var mtlLoader = new THREE.MTLLoader();

    mtlLoader.load( "3d_models/OBJ/ano/ano.mtl", function( materials ) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials( materials );
        objLoader.load("3d_models/OBJ/ano/ano.obj", function ( object ) {
            object.rotation.set(-Math.PI/2,0,0);
            console.log(object.children[0])
            scene.add( object );
        });
    },
    function ( xhr ) {
        console.log( 'OBJ ' + ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    function ( error ) {
        console.log(error);
    });

}

Answer 1

您没有放置相机，因此它可能在对象内部。

也没有看到其余的代码..从哪里调用“ start（）”并不明显？

Answer 2

这是一个有效的代码示例，我在三个js示例中找到了它，并修改了一些代码行以简化它：

var renderer;
        var clock = new THREE.Clock();
        var mixers = [];
        var onRenderFcts = [];
        var camera2, scene2;
        init2();

        function init2() {
            var container, stats;

            container = document.createElement( 'div' );
            document.body.appendChild( container );
            camera2 = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
            camera2.position.z = 250;

            scene2 = new THREE.Scene();
            var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
            scene2.add( ambientLight );
            var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
            camera2.add( pointLight );
            scene2.add( camera2 );

            var loader = new THREE.OBJLoader();

            var mtlLoader = new THREE.MTLLoader();

            mtlLoader.load( "3d_models/OBJ/ano/ano.mtl", function( materials ) {
                materials.preload();
                console.log(materials);
                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials( materials );
                objLoader.load("3d_models/OBJ/ano/ano.obj", function ( object ) {
                    console.log(object.children[0])
                    scene2.add( object );
                    onRenderFcts.push(function(){
                                object.rotation.y += 0.03;
                    })
                });
            },
            function ( xhr ) {
                console.log( 'OBJ ' + ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
            },
            function ( error ) {
                console.log(error);
            });
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
        }

        onRenderFcts.push(function(){
                renderer.render( scene2, camera2 );
            })
        // run the rendering loop
        var lastTimeMsec= null
        requestAnimationFrame(function animate(nowMsec){
            // keep looping
            requestAnimationFrame( animate );
            if ( mixers.length > 0 ) {
                for ( var i = 0; i < mixers.length; i ++ ) {
                    mixers[ i ].update( clock.getDelta() );
                }
            }
            // measure time
            lastTimeMsec    = lastTimeMsec || nowMsec-1000/60
            var deltaMsec   = Math.min(200, nowMsec - lastTimeMsec)
            lastTimeMsec    = nowMsec
            // call each update function
            onRenderFcts.forEach(function(onRenderFct){

                onRenderFct(deltaMsec/1000, nowMsec/1000)
            })
        })

用三个js显示一个对象

2 个答案: