Question

请帮忙。我正在为我的学校用Three.js做WebGL项目而且卡住了。

我想要实现的是让混合器中的对象显示在场景的中心（0,0,0）中，然后用键盘箭头旋转它。

这是我的init（）

var scene, camera, renderer;
init();
//animate();
function init() {

  scene = new THREE.Scene();
  var WIDTH = 880,
      HEIGHT = 550;


  renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setSize(WIDTH, HEIGHT);
  document.getElementsByClassName("pw")[0].appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(90, WIDTH / HEIGHT, 0.1, 1000000);
  camera.position.set(5,15,10);

  scene.add(camera);

  window.addEventListener('resize', function() {
    var WIDTH = 880,
        HEIGHT = 550;
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
  });



  //sky dome


    var vertexShader = document.getElementById( 'vertexShader' ).textContent;
    var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
    var uniforms = {
    topColor:      { type: "c", value: new THREE.Color(0x000053) },
    bottomColor: { type: "c", value: new THREE.Color( 0x2626ff ) },
    offset:         { type: "f", value: 100 },
    exponent:     { type: "f", value: 0.7 }
    }

    //skydome

    var skyGeo = new THREE.SphereGeometry( 2000, 32, 15 );
    var skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );

    var sky = new THREE.Mesh( skyGeo, skyMat );
    scene.add( sky );


  //lights


    var light4 = new THREE.HemisphereLight(0xfffff3, 0xd7f0ff, 0.2); // soft white light
    scene.add( light4 );


    var light2 = new THREE.PointLight(0xd7f0ff, 1);
    light2.position.set(1,1,1);
    scene.add(light2);





    var loader = new THREE.ColladaLoader();
    var dae

      loader.options.convertUpAxis = true;

      loader.load( 'models/ring.dae', function ( collada ) {
     //dummy1.dae

        dae = collada.scene;

        var skin = collada.skins[ 0 ];

    dae.position.set(0,0,0);//x,z,y- if you think in blender dimensions ;)
    dae.scale.set(7,7,7);

    scene.add(dae);

    });

    //controls = new THREE.OrbitControls(camera, renderer.domElement);
    document.addEventListener( 'keydown', onDocumentKeyDown, false );
    //document.addEventListener( 'keyup', onDocumentKeyUp, false );
     renderer.render(scene, camera);
        requestAnimationFrame(render);      
}

自从我注释掉对象后，对象ring.dae不再可见了......任何想法为什么？

Answer 1

修复了init（）

scene = new THREE.Scene();
  var WIDTH = 880,
      HEIGHT = 550;


  renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setSize(WIDTH, HEIGHT);
  document.getElementsByClassName("pw")[0].appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(25, WIDTH / HEIGHT, 0.1, 1000000);
  camera.position.set(0,2,7);

  scene.add(camera);

  window.addEventListener('resize', function() {
    var WIDTH = 880,
        HEIGHT = 550;
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
  });



  //sky dome


    var vertexShader = document.getElementById( 'vertexShader' ).textContent;
    var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
    var uniforms = {
    topColor:      { type: "c", value: new THREE.Color(0x000053) },
    bottomColor: { type: "c", value: new THREE.Color( 0x2626ff ) },
    offset:         { type: "f", value: 100 },
    exponent:     { type: "f", value: 0.7 }
    }

    //skydome

    var skyGeo = new THREE.SphereGeometry( 2000, 32, 15 );
    var skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );

    var sky = new THREE.Mesh( skyGeo, skyMat );
    scene.add( sky );


  //lights


    var light4 = new THREE.HemisphereLight(0xfffff3, 0xd7f0ff, 0.2); // soft white light
    scene.add( light4 );


    var light2 = new THREE.PointLight(0xd7f0ff, 1);
    light2.position.set(1,1,1);
    scene.add(light2);





    var loader = new THREE.ColladaLoader();


      loader.options.convertUpAxis = true;

      loader.load( 'models/ring.dae', function ( collada ) {

        ring = collada.scene;

        var skin = collada.skins[ 0 ];

    ring.position.set(0,0,0);//x,z,y- if you think in blender dimensions ;)
    ring.scale.set(7,7,7);

    scene.add(ring);
    renderer.render(scene, camera);

    });

    //controls = new THREE.OrbitControls(camera, renderer.domElement);
    document.addEventListener( 'keydown', onDocumentKeyDown, false );
    //document.addEventListener( 'keyup', onDocumentKeyUp, false );
     render();

渲染场景时不显示对象

1 个答案: