显示具有三个js的对象
显示具有三个js的对象
提问于 2018-08-14 05:43:10
你好，我只想展示一个有三个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);
});
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-14 23:04:18
以下是我在三个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)
})
})Stack Overflow用户
发布于 2018-08-14 05:46:06
你没有定位你的相机，所以它可能在你的物体里面。
也没有看到你代码的其余部分..从哪里调用"start()“并不明显？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51830998
复制相关文章
相似问题