I am trying to add multiple texture planes to a scene, each texture comes from a different remote url image and it is positioned on a exact point defined by an array of positions.
The images are provided by firebase asyncronous calls .
My problem is that each time that loads the scene the images are positioned on different position OR REPEATED .
What I am doing wrong?
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - effects - stereo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#0000ff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
</style>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="js/three.js"></script>
<script src="js/DeviceOrientationControls.js"></script>
<script src="js/StereoEffect.js"></script>
<script src="js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer, effect, controls;
var SCALE = 3;
var loader = new THREE.TextureLoader();
//allow cross origin loading
loader.crossOrigin = '';
var lastTweet;
var feedTwitter = [];
var feedInstagram = [];
var positions =[
[4, 0, 0],
[4, 5, -5],
[4, 5, 5],
[4, 0, -5],
[4, 0, 5],
[4, -5, -5],
[4, -5, 5],
[-3, 5, -5],
[-3, 0, -5],
[-3, -5, -5],
[-3, 5, 5],
[-3, 0, 5],
[-3, -5, 5]
]
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
asyncronous.on("value", function(snapshot){
var data = snapshot.val()
var geometry = new THREE.PlaneGeometry(1.5 * SCALE, 1 * SCALE);
var texture = loader.load(data[0]);
var material = new THREE.MeshBasicMaterial({map: texture});
var plane = new THREE.Mesh(geometry, material);
plane.position.x = positions[0][0]
plane.position.y = positions[0][1]
plane.position.z = positions[0][2]
plane.lookAt(camera.position);
scene.add(plane)
lastTweet = plane;
});
asyncronous2.on("value", function(snapshot){
var dataTweet = snapshot.val()
console.log("TWITT" + JSON.stringify(dataTweet));
for(var i = 0; i < dataTweet.length; i++){
var geometry = new THREE.PlaneGeometry(1.5 * SCALE, 1 * SCALE);
var texture = loader.load(dataTweet[i]);
var material = new THREE.MeshBasicMaterial({map: texture});
var plane = new THREE.Mesh(geometry, material);
plane.position.x = positions[i + 1][0]
plane.position.y = positions[i + 1][1]
plane.position.z = positions[i + 1][2]
plane.lookAt(camera.position);
scene.add(plane)
feedTwitter.push(plane);
}
});
asyncronous3.on("value", function(snapshot){
var dataInsta = snapshot.val()
console.log("INSTA" + JSON.stringify(dataInsta));
for(var i = 0; i < dataInsta.length; i++){
var geometry = new THREE.PlaneGeometry(1.5 * SCALE, 1 * SCALE);
var texture = loader.load(dataInsta[i]);
var material = new THREE.MeshBasicMaterial({map: texture});
var plane = new THREE.Mesh(geometry, material);
plane.position.x = positions[i + 7][0]
plane.position.y = positions[i + 7][1]
plane.position.z = positions[i + 7][2]
plane.lookAt(camera.position);
scene.add(plane)
feedInstagram.push(plane);
}
}
});
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100000 );
/*camera.position.x= 0
camera.position.y= 0
camera.position.z= 0*/
controls = new THREE.DeviceOrientationControls( camera );
scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
.setPath( 'textures/cube/demo/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
renderer = new THREE.WebGLRenderer()
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
effect = new THREE.StereoEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
effect.separation = 0.6;
console.log("finish init")
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
function render() {
effect.render( scene, camera );/*
console.log("finish render")*/
}
</script>
</body>
</html>
The:
for(var i = 0; i < dataInsta.length; i++){
for(var i = 0; i < dataInsta.length; i++){
looks suspicious...
Related
I'm new to THREE Js. I'm trying to draw something like this:
This is a simple curve in 3D. I draw a rectangular shape and then extrude 2 arcs.
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
var camera = new THREE.PerspectiveCamera();
var renderer = new THREE.WebGLRenderer();
function renderCurve(width, startX, startY) {
var delta = 0;
var frame = new THREE.Shape();
frame.moveTo(startX, startY);
frame.lineTo(startX + width, startY);
frame.lineTo(startX + width, startY + width);
frame.lineTo(startX, startY + width);
var hole = new THREE.Path();
hole.moveTo(startX + width + delta, startY + width + delta);
hole.absarc(
startX + width + delta,
startY + width + delta,
width / 2 + delta,
-Math.PI / 2,
-Math.PI,
true
);
hole.lineTo(startX + width + delta, startY + width + delta);
frame.holes.push(hole);
var holeExt = new THREE.Path();
holeExt.moveTo(startX + width, startY + width);
holeExt.absarc(
startX + width,
startY + width,
width,
-Math.PI / 2,
-Math.PI,
true
);
holeExt.lineTo(startX, startY);
frame.holes.push(holeExt);
var extrudeSettings = {
steps: 1,
depth: 1,
extrudeMaterial: 0,
bevelEnabled: false,
};
var curve = new THREE.ExtrudeGeometry(frame, extrudeSettings);
var material = new THREE.MeshBasicMaterial({
color: 0x000000,
});
var materialExtruded = new THREE.MeshBasicMaterial({
transparent:true,
opacity:1
});
var curveMesh = new THREE.Mesh(curve, [material, materialExtruded]);
scene.add(curveMesh);
}
function initScene() {
/**
* Camera
*/
const fov = 75;
camera = new THREE.PerspectiveCamera(
fov,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.x = 5;
camera.position.y = 10;
camera.position.z = 50;
/**
* Renderer
*/
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function renderAxes() {
var axeXMaterial = new THREE.LineBasicMaterial({
color: 0x00ff00,
});
var axeYMaterial = new THREE.LineBasicMaterial({
color: 0xff0000,
});
var axeZMaterial = new THREE.LineBasicMaterial({
color: 0x0000ff,
});
let points = [];
points.push(new THREE.Vector3(0, 0, 0));
points.push(new THREE.Vector3(10, 0, 0));
const axeXMesh = new THREE.Line(
new THREE.BufferGeometry().setFromPoints(points),
axeXMaterial
);
scene.add(axeXMesh);
points[1] = new THREE.Vector3(0, 10, 0);
const axeYMesh = new THREE.Line(
new THREE.BufferGeometry().setFromPoints(points),
axeYMaterial
);
scene.add(axeYMesh);
points[1] = new THREE.Vector3(0, 0, 10);
const axeZMesh = new THREE.Line(
new THREE.BufferGeometry().setFromPoints(points),
axeZMaterial
);
scene.add(axeZMesh);
}
function animate() {
requestAnimationFrame(animate);
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
initScene();
renderCurve(10, 0, 0);
//renderAxes();
animate();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1 id="header"></h1>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
My issue is that I don't want to see the extruded shape border. I only want the curve.
In fact, I want to extrude a BoxGeometry to get a curve in 3D, not just a shape.
Does anybody know how can I do that ?
I'm trying to export an animation scene in ThreeJS with GLTFExporter, but the animation is not being exported. Everything is correctly exported, the shapes, the color... This project is using the example to export: https://threejs.org/examples/#misc_exporter_gltf, and the example to animate: https://threejs.org/examples/#misc_animation_keys, but they don't work together. Any idea?
If I open the file with https://gltf-viewer.donmccurdy.com/, I see an error:
But if I log the export options when exporting, I can see the animations are there:
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - exporter - gltf</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<button id="export_scene">Export Scene</button>
</div>
<script type="module">
import * as THREE from '../../build/three.module.js';
import { GLTFExporter } from './jsm/exporters/GLTFExporter.js';
function exportGLTF(input, animationClip) {
const gltfExporter = new GLTFExporter();
const options = {
binary: true,
maxTextureSize: 4096,
animations: [animationClip],
includeCustomExtensions: true
};
console.log(options);
gltfExporter.parse(input, function (result) {
if (result instanceof ArrayBuffer) {
saveArrayBuffer(result, 'scene.glb');
} else {
const output = JSON.stringify(result, null, 2);
console.log(output);
saveString(output, 'scene.gltf');
}
}, options);
}
document.getElementById('export_scene').addEventListener('click', function () {
exportGLTF(scene, clip);
});
const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link); // Firefox workaround, see #6594
function save(blob, filename) {
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
}
function saveString(text, filename) {
save(new Blob([text], { type: 'text/plain' }), filename);
}
function saveArrayBuffer(buffer, filename) {
save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
}
let clock;
let camera, geometry, scene, renderer, mixer, clip;
let gridHelper, sphere, smallSphere;
init();
animate();
function init() {
scene = new THREE.Scene();
scene.name = 'scene';
// Perspective Camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(10, 300, 0);
camera.name = "PerspectiveCamera";
scene.add(camera);
// Ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
ambientLight.name = 'AmbientLight';
scene.add(ambientLight);
// DirectLight
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.target.position.set(0, 0, - 1);
dirLight.add(dirLight.target);
dirLight.lookAt(- 1, - 1, 0);
dirLight.name = 'DirectionalLight';
scene.add(dirLight);
//Axes
/*
const axes = new THREE.AxesHelper(500);
axes.name = "AxesHelper";
scene.add(axes);*/
// Sphere
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true });
sphere = new THREE.Mesh(new THREE.SphereGeometry(70, 10, 10), material);
sphere.position.set(0, 0, 0);
sphere.name = "Sphere";
scene.add(sphere);
// Small sphere
smallSphere = new THREE.Mesh(new THREE.SphereGeometry(20, 10, 10), material);
smallSphere.position.set(80, 0, 0);
smallSphere.name = "SmallSphere";
scene.add(smallSphere);
// POSITION
const positionKF = new THREE.VectorKeyframeTrack('.position', [0, 1, 2], [0, 90, 60, 30, 0, 60, 70, 40, 50]);
// SCALE
const scaleKF = new THREE.VectorKeyframeTrack('.scale', [0, 1, 2], [1, 1, 1, 2, 2, 2, 1, 1, 1]);
// ROTATION
// Rotation should be performed using quaternions, using a THREE.QuaternionKeyframeTrack
// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported
// set up rotation about x axis
const xAxis = new THREE.Vector3(1, 0, 0);
const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis, 0);
const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI);
const quaternionKF = new THREE.QuaternionKeyframeTrack('.quaternion', [0, 1, 2], [qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w]);
// COLOR
const colorKF = new THREE.ColorKeyframeTrack('.material.color', [0, 1, 2], [1, 0, 0, 0, 1, 0, 0, 0, 1], THREE.InterpolateDiscrete);
// OPACITY
const opacityKF = new THREE.NumberKeyframeTrack('.material.opacity', [0, 1, 2], [1, 0, 1]);
// Clip
clip = new THREE.AnimationClip('Action', 3, [scaleKF, positionKF, quaternionKF, colorKF, opacityKF]);
// Mixer
mixer = new THREE.AnimationMixer(smallSphere);
const clipAction = mixer.clipAction(clip);
clipAction.play();
// Clock
clock = new THREE.Clock();
// Renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
const timer = Date.now() * 0.0001;
const delta = clock.getDelta();
if (mixer) {
mixer.update(delta);
}
camera.position.x = Math.cos(timer) * 400;
camera.position.z = Math.sin(timer) * 400;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
Any idea?
As Don McCurdy explained in the comments, there were two problems:
It's not possible to export animations for the material properties (opacity and color).
I had to specify the object name before each pointer: <object-name>.position.
Thank you Don McCurdy.
You need to set a name to your Object3D:
const mesh = new THREE.Mesh(geometry, material);
mesh.name = 'myMesh'; // <- set a name
scene.add(mesh);
When you create your KeyframeTrack use that object's name:
const positionKF = new THREE.VectorKeyframeTrack('myMesh.position', times, values); // <-- use that object's name
yesterday #prisoner849 help me very well with the plante Orbit: Create a planet orbit
But now i have the problem to modify the script to create the orbit for the moons around the planets. I test to modify the start Point, but allways the Obrits are created at 0,0,0 around the sun not around the planet.
<!doctype html>
<html>
<head>
</head>
<body>
<div id="container"></div>
<!--Load three.js-->
<script src="js/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
var camera, controls, scene, renderer, raycaster;
var mouse = new THREE.Vector2();
init();
animate();
function init() {
scene = new THREE.Scene();
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
var container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100000000000000000);
camera.position.z = 30;
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.enableKeys = true;
var planet = ["-4067664386091","-710580828973","-3956610895959",
"29476716044","5149291420","-46417511315",
"124056083719","21671373654","16235707106",
"-107354576606","-18753785170","436797007078",
"-639929607985","-111789387758","-1118379774141",
"2907924314427","507985682645","-950946134275",
"-2275005926406","-397421085828","3223734974754"]
for ( var i = 0; i < 7; i ++ ) {
var planet_geometry = new THREE.SphereGeometry(10, 32, 32);
var planet_material = new THREE.MeshBasicMaterial( {color: 0x09F425} );
var planet_mesh = new THREE.Mesh( planet_geometry, planet_material );
planet_mesh.position.x = planet[i * 3] / 1000000000;
planet_mesh.position.y = planet[i * 3 + 1] / 1000000000;
planet_mesh.position.z = planet[i * 3 + 2] / 1000000000;
scene.add( planet_mesh );
var startPoint = new THREE.Vector3(0,0,0);
var endPoint = new THREE.Vector3(planet[i * 3] / 1000000000,planet[i * 3 + 1] / 1000000000,planet[i * 3 + 2] / 1000000000);
var planet_orbit_geometry = new THREE.CircleGeometry(startPoint.distanceTo(endPoint), 128);
planet_orbit_geometry.vertices.shift();
planet_orbit_geometry.rotateX(-Math.PI / 2);
var planet_orbit_material = new THREE.LineBasicMaterial( { color: 0xCC0000 } );
var planet_orbit_mesh = new THREE.Line( planet_orbit_geometry, planet_orbit_material );
planet_orbit_mesh.lookAt(endPoint);
scene.add(planet_orbit_mesh);
}
var moon = ["124366664452","21725629043","16083110466","560000","2",
"-107312642157","-18746459635","436850790914","150000","3",
"-107401228066","-18761934719","436860507268","140000","3",
"-107302625280","-18745221120","436489789440","270000","3"]
for ( var i = 0; i < 4; i ++ ) {
var moon_geometry = new THREE.SphereGeometry(moon[i * 5 + 3] / 100000, 32, 32);
var moon_material = new THREE.MeshBasicMaterial( {color: 0xf6cf46} );
var moon_mesh = new THREE.Mesh( moon_geometry, moon_material );
moon_mesh.position.x = moon[i * 5] / 850000000;
moon_mesh.position.y = moon[i * 5 + 1] / 850000000;
moon_mesh.position.z = moon[i * 5 + 2] / 850000000;
scene.add( moon_mesh );
var startPoint = new THREE.Vector3(planet[moon[i * 5 + 4] * 3] / 1000000000,planet[moon[i * 5 + 4] * 3 + 1] / 1000000000,planet[moon[i * 5 + 4] * 3 + 2] / 1000000000);;
var endPoint = new THREE.Vector3(moon[i * 5] / 850000000, moon[i * 5 + 1] / 850000000, moon[i * 5 + 2] / 850000000);
var moon_obrit_geometry = new THREE.CircleGeometry(startPoint.distanceTo(endPoint), 128);
moon_obrit_geometry.vertices.shift();
moon_obrit_geometry.rotateX(-Math.PI / 2);
var moon_orbit_material = new THREE.LineBasicMaterial( { color: 0xCCCC00 } );
var moon_orbit_mesh = new THREE.Line( moon_obrit_geometry, moon_orbit_material );
moon_orbit_mesh.lookAt(endPoint);
scene.add(moon_orbit_mesh);
}
var sun_geometry = new THREE.SphereGeometry(10, 32, 32);
var sun_material = new THREE.MeshBasicMaterial( {color: 0xCDF409} );
var sun_mesh = new THREE.Mesh( sun_geometry, sun_material );
sun_mesh.position.x = 0;
sun_mesh.position.y = 0;
sun_mesh.position.z = 0;
scene.add( sun_mesh );
window.addEventListener( 'mousemove', onMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onMouseMove( event ) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
Here are the jsfiddle: https://jsfiddle.net/n9x3wtnx/2/
Simply, you have to put your moon orbits' positions to positions of planets:
var orbGeometry = new THREE.CircleGeometry(startPoint.distanceTo(endPoint), 128);
orbGeometry.vertices.shift();
orbGeometry.rotateX(-Math.PI / 2);
var orbMaterial = new THREE.LineBasicMaterial( { color: 0xCCCC00 } );
var orbit = new THREE.Line( orbGeometry, orbMaterial );
orbit.position.copy(startPoint); // orbit's origin at planet's position
orbit.lookAt(endPoint);
scene.add(orbit);
jsfiddle example
Hello I try to control a mesh, he can turn and moove relative to its rotation by mesh.translate.
But for collisions, i cant find how to raycast relative to its rotation.
If the origin mesh is not rotated or if I moove it with mesh.position.x++, it works. But rotated and with translateX(1), it's not ok.
Thank you for your attention.
Here is my function only for right side (+X) :
function coll(b1,b2){
var hit = false;
var dist = (width/2);
var matrix = new THREE.Matrix4();
matrix.extractRotation( b1.matrix );
var origin = new THREE.Vector3(b1.position.x,b1.position.y,b1.position.z);
var direction = new THREE.Vector3( 1, 0, 0 );
direction = matrix.multiplyVector3( direction );
var ray = new THREE.Raycaster(origin, direction,0,dist);
var collisionResult = ray.intersectObject(b2);
if(collisionResult!=0){
hit = true; b1.translateX( -1 );
}else{
hit = false;
}//if
return hit;
}//coll()
And this is the entire code just in case :
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometry - cube</title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
color: white;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script>
var camera, scene, renderer;
var width = 100;
var mesh, mesh2;
var key = {left:false};
function keyDown(e){
if (e.keyCode == 39) { key.right = true; }
}//keyPress()
window.addEventListener("keydown", keyDown);
function keyUp(e){
if (e.keyCode == 39) { key.right = false; }
}//keyPress()
window.addEventListener("keyup", keyUp);
function moove(m){
if (key.right){
m.translateX( 1 );
//m.position.x++;
}//if
if (key.left){
m.translateX( -1 );
}//if
}//moove()
function coll(b1,b2){
var hit = false;
var dist = (width/2);
var matrix = new THREE.Matrix4();
matrix.extractRotation( b1.matrix );
var origin = new THREE.Vector3(b1.position.x,b1.position.y,b1.position.z);
var direction = new THREE.Vector3( 1, 0, 0 );
direction = matrix.multiplyVector3( direction );
var ray = new THREE.Raycaster(origin, direction,0,dist);
var collisionResult = ray.intersectObject(b2);
if(collisionResult!=0){
hit = true; b1.translateX( -1 );
}else{
hit = false;
}//if
return hit;
}//coll()
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry( width, 10, 10);
mesh = new THREE.Mesh( geometry);
scene.add( mesh );
mesh.position.x = -100;
mesh.position.y = -20;
mesh.rotation.z = 1;
geometry = new THREE.BoxGeometry( width, 100, 100);
mesh2 = new THREE.Mesh( geometry);
scene.add( mesh2 );
window.addEventListener( 'resize', onWindowResize, false );
}//init()
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}//resize()
function animate() {
requestAnimationFrame( animate );
coll(mesh,mesh2);
moove(mesh);
renderer.render( scene, camera );
}//animate()
</script>
</body>
</html>
I also tried with quaternion but its still the same result :
direction.applyQuaternion( b1.quaternion );
I have a collision with mesh.position.x++ so maybe translateX does something wrong ?
It is ok now. This collision works good finally.
I tried adding the latest OrbitControls.js to my scene and orbit seams to work ok. However, when I zoom using the middle mouse button or scroll wheel the axis seams to be off and it no longer rotates correctly. Pan (or strafe) does not seem to work correctly in my scene either.
In the example, http://threejs.org/examples/#misc_controls_orbit right mouse button moves the camera parallel to the scene and in my scene it just orbits the same as left mouse button. You can see how mine is misbehaving http://www.xrez.com/tufa_test/.
<!DOCTYPE html>
<html lang="en">
<head>
<title>obj tester</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
}
</style>
</head>
<body>
<script src="cam.js"></script>
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var camera, scene, controls, renderer;
var canvasRenderer, webglRenderer;
var mesh, zmesh, geometry;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var meshes = [];
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
camera.position.x = 400;
camera.position.y = 200;
camera.position.z = 400;
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambient);
// var directionalLight = new THREE.DirectionalLight(0x000000);
//directionalLight.position.set(0, 70, 100).normalize();
//scene.add(directionalLight);
// RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
container.appendChild(webglRenderer.domElement);
var loader = new THREE.JSONLoader(),
callbackKey = function(geometry) {createScene(geometry, 0, 0, 0, 15, "twe.jpg")};
loader.load("tufaWallEarly02_v3.js", callbackKey);
window.addEventListener('resize', onWindowResize, false);
}
function createScene(geometry, x, y, z, scale, tmap) {
zmesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture(tmap)}));
zmesh.position.set(x, y, z);
zmesh.scale.set(scale, scale, scale);
meshes.push(zmesh);
scene.add(zmesh);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
webglRenderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
for(var i = 0; i < meshes.length; i++){
meshes[i].rotation.y += .001;
}
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
camera.lookAt(scene.position);
webglRenderer.render(scene, camera);
}
</script>
</body>
remove the camera.lookAt(scene.position); line
In OrbitControls.js line 219 find onMouseDown
and comment this lines
/*if ( event.button === 2 )
state = STATE.PAN;*/