请帮忙。我正在为我的学校用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不再可见了......任何想法为什么?
答案 0 :(得分:0)
修复了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();