我的物体和灯光有小问题。当我旋转对象时,灯光与对象一起移动。我希望光线是静止的。是因为我向渲染器添加了场景,所以光在移动吗?我不知道如何将对象添加到渲染器,所以我尝试将场景添加到渲染器。那是引起问题的原因吗?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>THEE JS BOX APP</title>
<style>
body {
margin: 0;
width: 100%;
height: 100%;
font-size: 0;
overflow: hidden;
display: flex;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJloader.js"></script>
<script>
$(document).ready(function() {
// CREATING AN EMPTY SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
camera.position.z = 150;
// ORBIT CONTROL
var controls = new THREE.OrbitControls( camera );
// RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#000000");
//************** SETTING SIZE FOR RENDERER *******************//
renderer.setSize( window.innerWidth ,window.innerHeight );
//renderer.setSize( 550, 297);
//************** END-OF-SETTING SIZE FOR RENDERER *******************//
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// APPEND RENDERER TO DOM
document.body.appendChild( renderer.domElement );
// WINDOW RESIZE
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
// instantiate a loader
var loader = new THREE.OBJLoader();
// load a resource
loader.load(
// resource URL
'img/logovoivode1.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
// ***************************** LIGHTING **********************************//
var ambientlight = new THREE.AmbientLight( 0xa6a6a6, 0.25 );
scene.add( ambientlight );
var dirlight = new THREE.DirectionalLight( 0xfffff, 0.8, 500 );
dirlight.target = scene;
scene.add(dirlight);
scene.add(dirlight.target);
var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
pointLight.position.set( 0, 100, 50 );
scene.add( pointLight );
var sphereSize = 1;
var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );
// ************************ END-OF-LIGHTING *****************************//
// CREATING A BOX
//var geometry = new THREE.BoxGeometry(1, 1, 1);
//var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe:true});
//var cube = new THREE.Mesh( geometry, material);
// ADD CUBE TO THE SCENE
//scene.add(cube);
// ANIMATION LOOP
function animate() {
requestAnimationFrame( animate );
//scene.rotation.x += 0.01;
scene.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
});
</script>
</body>
</html>
答案 0 :(得分:0)
注意:您正在旋转场景(其中包含光点),而不是对象。 您要做的就是旋转对象,您将获得预期的结果。
编辑:
// instantiate a loader
var loader = new THREE.OBJLoader();
var myObj;
// load a resource
loader.load(
// resource URL
'img/logovoivode1.obj',
// called when resource is loaded
function ( object ) {
myObj = object
// code;
},
//code
);
// ***************************** LIGHTING**********************************//
// code
function animate() {
requestAnimationFrame( animate );
myObj.rotation.y += 0.01;
renderer.render( scene, camera );
}