渲染场景时不显示对象

Object not showing when scene rendered

本文关键字：显示 对象      更新时间：2023-09-26

请帮忙。我正在为我的学校做Three.js的WebGL项目，但被困住了。

我试图实现的是将来自搅拌机的对象显示在场景的中心（0,0,0），然后使用键盘箭头旋转它。

这是我的初始化（）

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

自从我控制了对象环.dae不再可见以来......知道为什么吗？

固定的 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();
相关文章：