Javascript 渲染场景时不显示对象
请帮忙。我正在用Three.js为我的学校做WebGL项目,我被卡住了 我试图实现的是让一个来自blender的对象显示在场景的中心0,0,0,然后用键盘箭头旋转它 这是我的名字Javascript 渲染场景时不显示对象,javascript,three.js,Javascript,Three.js,请帮忙。我正在用Three.js为我的学校做WebGL项目,我被卡住了 我试图实现的是让一个来自blender的对象显示在场景的中心0,0,0,然后用键盘箭头旋转它 这是我的名字 var scene, camera, renderer; init(); //animate(); function init() { scene = new THREE.Scene(); var WIDTH = 880, HEIGHT = 550; renderer = new THRE
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就不再可见。。。知道为什么吗?修复了初始化
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();