admin管理员组文章数量:1290266
I'm doing a small project where I needed to create interactive 3D scene on web. I used three.js to import blender designed objects. First I tried exporting objects as JSON but it won't import into the web. Then I tried exporting the objects as separate .obj files and imported them one by one.
Now I need to make this for the user to move and rotate each objects along in Y axis only. Because my design is of House plan and I need only to rotate and move each rooms. It will be big help if you could find me a source for this.
This is the code after I created the scene and imported objects one by one:
var obj1 = {
scene: null,
camera: null,
renderer: null,
container: null,
controls: null,
clock: null,
stats: null,
init: function() { // Initialization
// create main scene
this.scene = new THREE.Scene();
this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003);
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight;
// prepare camera
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 2000;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(0, 100, 300);
this.camera.lookAt(new THREE.Vector3(0,0,0));
// prepare renderer
this.renderer = new THREE.WebGLRenderer({ antialias:true });
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.renderer.setClearColor(this.scene.fog.color);
this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;
// prepare container
this.container = document.createElement('div');
document.body.appendChild(this.container);
this.container.appendChild(this.renderer.domElement);
// events
THREEx.WindowResize(this.renderer, this.camera);
// prepare controls (OrbitControls)
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target = new THREE.Vector3(0, 0, 0);
this.controls.maxDistance = 2000;
// prepare clock
this.clock = new THREE.Clock();
// prepare stats
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.left = '50px';
this.stats.domElement.style.bottom = '50px';
this.stats.domElement.style.zIndex = 1;
this.container.appendChild( this.stats.domElement );
// add spot light
var spLight = new THREE.SpotLight(0xffffff, 1.75, 2000, Math.PI / 3);
spLight.castShadow = true;
spLight.position.set(-100, 300, -50);
this.scene.add(spLight);
// add simple ground
var ground = new THREE.Mesh( new THREE.PlaneGeometry(200, 200, 10, 10), new THREE.MeshLambertMaterial({color:0x999999}) );
ground.receiveShadow = true;
ground.position.set(0, 0, 0);
ground.rotation.x = -Math.PI / 2;
this.scene.add(ground);
// load a model
this.loadModel();
},
loadModel: function() {
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Kitchen.obj', 'models/Kitchen.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Bath.obj', 'models/Bath.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Bedroom.obj', 'models/Bedroom.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Closet.obj', 'models/Closet.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Corridor.obj', 'models/Corridor.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Potio.obj', 'models/Potio.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Living.obj', 'models/Living.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
}
};
// Animate the scene
function animate() {
requestAnimationFrame(animate);
render();
update();
}
// Update controls and stats
function update() {
obj1.controls.update(obj1.clock.getDelta());
obj1.stats.update();
}
// Render the scene
function render() {
if (obj1.renderer) {
obj1.renderer.render(obj1.scene, obj1.camera);
}
}
// Initialize lesson on page load
function initializeObj() {
obj1.init();
animate();
}
if (window.addEventListener)
window.addEventListener('load', initializeObj, false);
else if (window.attachEvent)enter code here
window.attachEvent('onload', initializeObj);
else window.onload = initializeObj;
I'm doing a small project where I needed to create interactive 3D scene on web. I used three.js to import blender designed objects. First I tried exporting objects as JSON but it won't import into the web. Then I tried exporting the objects as separate .obj files and imported them one by one.
Now I need to make this for the user to move and rotate each objects along in Y axis only. Because my design is of House plan and I need only to rotate and move each rooms. It will be big help if you could find me a source for this.
This is the code after I created the scene and imported objects one by one:
var obj1 = {
scene: null,
camera: null,
renderer: null,
container: null,
controls: null,
clock: null,
stats: null,
init: function() { // Initialization
// create main scene
this.scene = new THREE.Scene();
this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003);
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight;
// prepare camera
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 2000;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(0, 100, 300);
this.camera.lookAt(new THREE.Vector3(0,0,0));
// prepare renderer
this.renderer = new THREE.WebGLRenderer({ antialias:true });
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.renderer.setClearColor(this.scene.fog.color);
this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;
// prepare container
this.container = document.createElement('div');
document.body.appendChild(this.container);
this.container.appendChild(this.renderer.domElement);
// events
THREEx.WindowResize(this.renderer, this.camera);
// prepare controls (OrbitControls)
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target = new THREE.Vector3(0, 0, 0);
this.controls.maxDistance = 2000;
// prepare clock
this.clock = new THREE.Clock();
// prepare stats
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.left = '50px';
this.stats.domElement.style.bottom = '50px';
this.stats.domElement.style.zIndex = 1;
this.container.appendChild( this.stats.domElement );
// add spot light
var spLight = new THREE.SpotLight(0xffffff, 1.75, 2000, Math.PI / 3);
spLight.castShadow = true;
spLight.position.set(-100, 300, -50);
this.scene.add(spLight);
// add simple ground
var ground = new THREE.Mesh( new THREE.PlaneGeometry(200, 200, 10, 10), new THREE.MeshLambertMaterial({color:0x999999}) );
ground.receiveShadow = true;
ground.position.set(0, 0, 0);
ground.rotation.x = -Math.PI / 2;
this.scene.add(ground);
// load a model
this.loadModel();
},
loadModel: function() {
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Kitchen.obj', 'models/Kitchen.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Bath.obj', 'models/Bath.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Bedroom.obj', 'models/Bedroom.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Closet.obj', 'models/Closet.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Corridor.obj', 'models/Corridor.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Potio.obj', 'models/Potio.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
// prepare loader and load the model
var oLoader = new THREE.OBJMTLLoader();
oLoader.load('models/Living.obj', 'models/Living.mtl', function(object) {
// object.position.x = -200;
// object.position.y = 0;
// object.position.z = 100;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
}
};
// Animate the scene
function animate() {
requestAnimationFrame(animate);
render();
update();
}
// Update controls and stats
function update() {
obj1.controls.update(obj1.clock.getDelta());
obj1.stats.update();
}
// Render the scene
function render() {
if (obj1.renderer) {
obj1.renderer.render(obj1.scene, obj1.camera);
}
}
// Initialize lesson on page load
function initializeObj() {
obj1.init();
animate();
}
if (window.addEventListener)
window.addEventListener('load', initializeObj, false);
else if (window.attachEvent)enter code here
window.attachEvent('onload', initializeObj);
else window.onload = initializeObj;
- I cannot see any rotation / move / drag code above. Do you mean that the user should be able to move and rotate with the mouse, or that you want to move and rotate your meshes in the script ? And what did you try ? – Mouloud85 Commented Jun 26, 2016 at 11:58
- yes, User should be able to select each object and move and rotate it (selected object) with mouse or/and keyboard. – user5099413 Commented Jun 26, 2016 at 23:36
- For that you need a raycaster. Look at the threejs examples about raycasters first. – Mouloud85 Commented Jun 27, 2016 at 6:51
1 Answer
Reset to default 9you can save the loaded object in a variable, which you then use later to rotate it:
-add a variable: var myObj;
-when loading the object, set the variable
oLoader.load('models/Living.obj', 'models/Living.mtl', function(object) {
myObj = object;
object.scale.set(10, 10, 10);
obj1.scene.add(object);
});
-inside the animate() function, rotate your object over time:
myObj.rotation.y = Date.now()*.002;
or do some other stuff
Alternatively, as your Scene structure is consistent, you can just use
obj1.scene.children[4].rotation.y = Date.now()*.002;
but note you will need to adjust the number everytime you Change your loading order or add lights etc, so i do not remend it to you
To rotate it with the mouse:
//you need to store this to know how far the mouse has moved
var lastMPos = {};
//this function is called when the mouse is moved
function mousemove(event){
//you can only calculate the distance if therer already was a mouse event
if (typeof(lastMPos.x) != 'undefined') {
//calculate how far the mouse has moved
var deltaX = lastMPos.x - event.clientX,
deltaY = lastMPos.y - event.clientY;
//rotate your object accordingly
obj1.scene.children[4].rotation.y += deltaX *.005;
}
//save current mouse Position for next time
lastMPos = {
x : event.clientX,
y : event.clientY
};
}
本文标签： javascriptHow to move and rotate imported objects in threejsStack Overflow
版权声明：本文标题：javascript - How to move and rotate imported objects in three.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741426593a2378112.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论