I'm trying to get Three.js to add a box to the scene on iOS but it doesn't seem to work while on macOS Safari it does.
The scene sets up correctly and adds the first box but when adding the "cube" it doesn't appear on the scene
iOS 12.1.1 on an iPad
var scene, renderer, controls, camera;
function init() {
container = document.getElementById("canvas");
container.height = $("#canvas").height();
container.width = $("#canvas").width();
camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(300, 300, 300);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xfffff0);
scene.add(new THREE.AmbientLight(0x555555));
var light = new THREE.SpotLight(0xffffff, 1.5);
light.position.set(0, 500, 2000);
scene.add(light);
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setClearColor(0xE6EEF2);
renderer.setSize($(container).width(), $(container).height());
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableKeys = false;
controls.enabled = false;
}
function addBox() {
var orientation = {
dim1: 78,
dim2: 62,
dim3: 35
}
var geom = new THREE.BoxGeometry(orientation.dim1, orientation.dim2, orientation.dim3);
geom.translate(orientation.dim1 / 2, orientation.dim2 / 2, orientation.dim3 / 2);
box_material = new THREE.MeshPhongMaterial({
transparent: true,
opacity: 0,
alphaTest: 0.5
});
mesh = new THREE.Mesh(geom, box_material)
var geometry = new THREE.EdgesGeometry(mesh.geometry);
var edges_material = new THREE.LineBasicMaterial({
color: 0x000000,
linewidth: 2
});
var edges = new THREE.LineSegments(geometry, edges_material);
mesh.name = "box1"
scene.add(mesh.add(edges));
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
controls.update();
renderer.render(scene, camera);
}
function addCube() {
pos = {
x: 46,
y: 0,
z: 0
};
orientation = orientation = {
dim1: 46,
dim2: 28,
dim3: 30
}
var geom = new THREE.BoxGeometry(orientation.dim1, orientation.dim2, orientation.dim3);
geom.translate(pos.x + orientation.dim1 / 2, pos.y + orientation.dim2 / 2, pos.z + orientation.dim3 / 2);
material = new THREE.MeshPhongMaterial({
color: Math.random() * 0xffffff,
flatShading: true,
vertexColors: THREE.VertexColors,
transparent: true,
opacity: 0.7
});
mesh = new THREE.Mesh(geom, material)
mesh.name = "cube";
scene.add(mesh);
console.log("added cube");
}
init();
animate();
addBox();
addCube();
body {
margin: 0;
}
.main {
height: 100vh;
display: flex;
position: relative;
}
.content {
display: flex;
width: 100%;
max-height: 100vh;
overflow: auto;
}
.box {
flex: 1 1 auto;
display: flex;
flex-direction: column;
border-left: 1px solid #CED4D9;
border-right: 1px solid #CED4D9;
align-items: center;
}
.boxView-container {
width: 100%;
height: auto;
flex: 1 1 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<body>
hello2
<div id="root">
<main class="main">
<section class="content">
<div class="box">
<div class="boxView-container" id="canvas"></div>
</div>
</section>
</main>
</div>
</body>
On macOS Safari:
On iOS Safari:
jsfiddle:
http://jsfiddle.net/acrogenesis/d583wyft/44/
I think it is caused by variable scope. You need define some local variables, or else the addCube function will change some global variables above.
like var pos, mesh etc.
function addCube() {
var pos = {x: 46, y: 0, z: 0};
var orientation = {
dim1: 46,
dim2: 28,
dim3: 30
}
var geom = new THREE.BoxGeometry(orientation.dim1, orientation.dim2, orientation.dim3);
geom.translate(pos.x + orientation.dim1 / 2, pos.y + orientation.dim2 / 2, pos.z + orientation.dim3 / 2);
var material = new THREE.MeshPhongMaterial({
color: Math.random() * 0xffffff,
flatShading: true,
vertexColors: THREE.VertexColors,
transparent: true,
opacity: 0.7
});
var mesh = new THREE.Mesh(geom, material)
mesh.name = "cube";
scene.add(mesh);
console.log("added cube");
}
After define these local variables, now working great on iOS.
Related
I am trying to plot a 3d network using three.js. The nodes of
the three.js graph network is associated with array of values. I want these
values to be plotted using plotly.js when nodes are clicked.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js & Plotly integration</title>
<style>
#three-js-container {
width: 70%;
height: 400px;
float: left;
}
#plotly-container {
width: 30%;
height: 400px;
float: right;
}
</style>
</head>
<body>
<div id="three-js-container"></div>
<div id="plotly-container"></div>
<script src="https://cdn.jsdelivr.net/npm/three#0.117.0/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/plotly.js#1.55.3/dist/plotly.min.js"></script>
<script>
// Three.js code for network graph
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth * 0.7, 400);
document.querySelector("#three-js-container").appendChild(renderer.domElement);
// Values of nodes
var values = [
[10, 15, 20, 25],
[5, 10, 15, 20]
];
// Create node1
var node1 = new THREE.SphereGeometry(5, 32, 32);
var node1Material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var node1Mesh = new THREE.Mesh(node1, node1Material);
node1Mesh.position.set(-10, 0, 0);
scene.add(node1Mesh);
// Create node2
var node2 = new THREE.SphereGeometry(5, 32, 32);
var node2Material = new THREE.MeshBasicMaterial({color: 0xff0000});
var node2Mesh = new THREE.Mesh(node2, node2Material);
node2Mesh.position.set(10, 0, 0);
scene.add(node2Mesh);
// Create edge
var edge = new THREE.Line(
new THREE.BufferGeometry().setFromPoints( [
new THREE.Vector3( node1Mesh.position.x, node1Mesh.position.y, node1Mesh.position.z ),
new THREE.Vector3( node2Mesh.position.x, node2Mesh.position.y, node2Mesh.position.z )
] ),
new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } )
);
scene.add(edge);
camera.position.z = 20;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
// Event listener to detect click on edge
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
document.querySelector("#three-js-container").addEventListener("click", function(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects([edge]);
if (intersects.length > 0) {
// Show plotly graph on side panel
Plotly.newPlot('side-panel', [{
x: [0, 1, 2, 3],
y: values[0],
type: 'scatter'
}, {
x: [0, 1, 2, 3],
y: values[1],
type: 'scatter'
}], {
title: 'Values of Nodes'
});
}
});
</script>
</body>
</html>
But the plotly line graph is not visible when the three.js nodes are clicked.
Suggestions on how to fix this will be really helpful.
I'm experiencing a small problem with an editor I'm building. it's a terrain editor, with toolbars on the left and top, with a canvas on the bottom right. There is a beacon named 'helperHandle' in the canvas which will demonstrate which vector you are currently hovering over. however, the beacon doesn't align properly with the mouse, it seems to be using the entire window as an offset, instead of just the rendering canvas. as you can see from the image below. I've included my code below the image.
The javascript >>
$( document ).ready(function() {
var terrainMesh;
var helperHandle;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var cameraholder;
function main() {
const canvas = document.querySelector('#terrainRender');
const renderer = new THREE.WebGLRenderer({canvas, alpha: true});
var cubes = [];
const fov = 40;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 1000;
cameraholder = new THREE.Object3D();
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0,10,20);
camera.lookAt( 0, 0, 0 );
camera.zoom = 0.5;
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x555555 );
scene.add(cameraholder);
var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );
var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );
const color = 0xFFFFFF;
const intensity = 0.1;
light = new THREE.DirectionalLight(color, intensity);
light.position.set(1, 30, 10);
light.target.position.set( 0, 0, 0 );
light.castShadow = true;
var lightHelper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( lightHelper );
const controls = new THREE.OrbitControls(camera, canvas);
controls.target.set(0, 0, 0);
controls.update();
scene.add( light );
var geometry = new THREE.PlaneBufferGeometry(60, 60, 9, 9);
var material = new THREE.MeshBasicMaterial(
{color: 0x666666,
side: THREE.DoubleSide
});
rotateObject(geometry, -90, 0, 0);
geometry.computeFaceNormals(); // needed for helper
var helperHandlegeometry = new THREE.ConeBufferGeometry( 1, 3, 3 );
helperHandlegeometry.rotateX( Math.PI / 2 );
helperHandle = new THREE.Mesh( helperHandlegeometry, new THREE.MeshNormalMaterial() );
scene.add( helperHandle );
terrainMesh = new THREE.Mesh( geometry, material );
scene.add( terrainMesh );
var wireframe = new THREE.WireframeGeometry( geometry );
var line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 0.25;
line.material.transparent = true;
scene.add( line );
function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
const direction = (new THREE.Vector3())
.subVectors(camera.position, boxCenter)
.multiply(new THREE.Vector3(1, 0, 1))
.normalize();
camera.near = boxSize / 100;
camera.far = boxSize * 100;
camera.updateProjectionMatrix();
camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
}
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = renderer.domElement.clientWidth;
const height = renderer.domElement.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render(time) {
time *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = renderer.domElement.clientWidth / renderer.domElement.clientHeight;
camera.updateProjectionMatrix();
}
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function onMouseMove( event ) {
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
terrainMesh.updateMatrixWorld();
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObject( terrainMesh );
if ( intersects.length > 0 ) {
helperHandle.position.set( 0, 0, 0 );
helperHandle.lookAt( intersects[ 0 ].face.normal );
helperHandle.position.copy( intersects[ 0 ].point );
}
$('#coords').html(`X: ${mouse.x.toFixed(2)} <br>Y: ${mouse.y.toFixed(2)}`);
}
window.addEventListener( 'mousemove', onMouseMove, false );
requestAnimationFrame(render);
}
main();
});
The html >>
<div id="main">
<div id="toolBar">
</div>
<div class="editorWindow">
<div id="sideBar"></div>
<canvas id="terrainRender"></canvas>
<div id="coords"></div>
</div>
</div>
The CSS (less) >>
div{
}
body { margin: 0; }
#coords{
position: absolute;
top: 0;
width: 40px;
height: 40px;
background-color: #fff;
}
.titleBar{
height: 30px;
width: 100%;
display: block;
background-color: #e0e0e0;
}
#main{
position: relative;
background-color: #f4f4f4;
display: grid;
height: 99vh;
flex-wrap: wrap;
border: 1px solid #aaa;
padding: 0.2%;
.editorWindow{
flex: 1;
flex-direction: row;
display: flex;
}
#toolBar{
height: 60px;
}
#sideBar{
flex: 1 2 10%;
position: relative;
background-color: #f4f4f4;
border: solid 1px #aaa;
}
#terrainRender {
flex: 12 1 80%;
}
}
#terrain{
display: inline-block;
zoom: 100%;
transform-origin: center;
white-space: nowrap;
font-size: 0px;
transform-style: preserve-3d;
/*transform: rotateZ(0deg) rotateY(0deg) rotateX(45deg);*/
}
I have Line object with THREE.LineBasicMaterial, then i'am trying to change material:
material = new THREE.LineDashedMaterial({
dashSize: 5,
gapSize: 5,
})
line.material = material
line.material.needsUpdate = true
line.geometry.uvsNeedUpdate = true
line.geometry.verticesNeedUpdate = true
line.computeLineDistances()
But nothing happens, the line is still not dotted, any ideas?
Works as expected:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(3, 5, 8);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper(10, 10));
var pts = [];
var ptsCount = 10;
for (let i = 0; i < ptsCount; i++) {
pts.push(new THREE.Vector3(
Math.random() - 0.5,
Math.random() - 0.5,
Math.random() - 0.5
).multiplyScalar(10))
}
var geom = new THREE.BufferGeometry().setFromPoints(pts);
var mat = new THREE.LineBasicMaterial({
color: "yellow"
});
var line = new THREE.Line(geom, mat);
scene.add(line);
btnDashed.addEventListener("click", event => {
let mat = new THREE.LineDashedMaterial({
color: (Math.random() * 0x888888) + 0x888888,
dashSize: 0.5 + Math.random() * 0.5,
gapSize: Math.random() * 0.5
});
line.computeLineDistances();
line.material = mat;
})
renderer.setAnimationLoop(() => {
renderer.render(scene, camera)
})
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<button id="btnDashed" style="position: absolute;">
Make dashed
</button>
After clicking the button, I want the whole 3D object(width and height) to fit to left side of the screen and show a div HTML info in the right side of the screen.
How to fit object to left side of the screen? Is it possible to set margin(px)?
var camera, scene, renderer;
var geometry, material, mesh;
var lookDirection = new THREE.Vector3();
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.mouseButtons = {
LEFT: THREE.MOUSE.RIGHT,
MIDDLE: THREE.MOUSE.MIDDLE,
RIGHT: THREE.MOUSE.LEFT
}
controls.enableZoom = false;
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
controls.update();
TWEEN.update();
}
function fit(){
controls.enabled = false;
var box = new THREE.Box3().setFromObject(mesh);
var boxSize = box.getSize(new THREE.Vector3()).length();
var boxCenter = box.getCenter(new THREE.Vector3());
var halfSizeToFitOnScreen = boxSize * 0.5;
var halfFovY = THREE.Math.degToRad(camera.fov * 0.5);
var distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
// compute a unit vector that points in the direction the camera is now
// in the xz plane from the center of the box
const direction = (new THREE.Vector3())
.subVectors(camera.position, boxCenter)
.multiply(new THREE.Vector3(1, 0, 1))
.normalize();
// tween animation
var from = camera.position;
var to = direction.multiplyScalar(distance).add(boxCenter);
var tween = new TWEEN.Tween(from)
.to(to, 1000)
.easing(TWEEN.Easing.Quadratic.InOut)
.onUpdate(function () {
camera.position.set(this.x, this.y, this.z);
// update the Trackball controls to handle the new size
controls.enabled = true;
controls.target.copy(boxCenter);
controls.update();
})
.start();
}
document.getElementById("btn").addEventListener("click", fit);
body {
margin: 0;
overflow: hidden;
}
button {
position: fixed;
top: 0;
left: 0;
}
<button id="btn">Fit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://sole.github.io/tween.js/build/tween.min.js"></script>
Thanks!
Sounds like you're really just asking an HTML/JavaScript question
One way would be to use a flex box
function fit(){
const elem = document.querySelector('#panes> .right');
elem.style.display = elem.style.display == 'none' ? '' : 'none';
}
document.getElementById("btn").addEventListener("click", fit);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
#panes {
display: flex;
width: 100vw;
height: 100vh;
}
#panes>.left,
#panes>.right {
flex: 1 1 50%;
height: 100%;
}
#panes>.left {
padding: 1em;
text-align: center;
background: red;
}
#panes>.right {
padding: 1em;
background: blue;
color: white;
}
button {
position: fixed;
top: 0;
left: 0;
}
<div id="panes">
<div class="left"> Stuff On Left</div>
<div class="right" style="display: none;">Stuff on right</div>
</div>
<button id="btn">Fit</button>
Then insert the canvas in the left pane and use a better example of how to set the canvas's size
var camera, scene, renderer;
var geometry, material, mesh;
var lookDirection = new THREE.Vector3();
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, 2, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
document.querySelector("#panes>.left").appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.mouseButtons = {
LEFT: THREE.MOUSE.RIGHT,
MIDDLE: THREE.MOUSE.MIDDLE,
RIGHT: THREE.MOUSE.LEFT
}
controls.enableZoom = false;
}
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function animate() {
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
renderer.render( scene, camera );
controls.update();
TWEEN.update();
requestAnimationFrame( animate );
}
function fit(){
const elem = document.querySelector('#panes> .right');
elem.style.display = elem.style.display == 'none' ? '' : 'none';
}
document.getElementById("btn").addEventListener("click", fit);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
#panes {
display: flex;
width: 100vw;
height: 100vh;
}
#panes>.left,
#panes>.right {
flex: 1 1 50%;
height: 100%;
}
#panes>.right {
padding: 1em;
background: blue;
color: white;
}
button {
position: fixed;
top: 0;
left: 0;
}
<div id="panes">
<div class="left"></div>
<div class="right" style="display: none;">Stuff on right</div>
</div>
<button id="btn">Fit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://sole.github.io/tween.js/build/tween.min.js"></script>
I hope it's not late to answer this question, but I found something that maybe is what you were looking for. Check Is there ANY way to have the three.js camera lookat being rendered off-center?
camera = new THREE.PerspectiveCamera( for, aspect, near, far );
camera.setViewOffset( fullWidth, fullHeight, widthOffset, heightOffset, viewWidth, viewHeight );
Take widthOffset and heightOffset as parameters to slide de target of your camera to any side.
How to tween the camera to the top position with a look to the object in three.js with help of tween.js. The camera tween to the right position works perfectly.
Please use this codepen: http://codepen.io/anon/pen/ObQxjV?editors=1111
image to clarify
var camera, renderer, controls;
//scene
scene = new THREE.Scene();
//camera
camera = new THREE.OrthographicCamera(640 / -2, 640 / 2, 480 / 2, 480 / -2, -5000, 10000000);
camera.position.set(500, 500, 500);
scene.add(camera);
//renderer
renderer = new THREE.WebGLRenderer({ precision: "highp", antialias: true, preserveDrawingBuffer: false });
renderer.setSize(640, 480);
renderer.setClearColor(0xc2c2c2);
$("#canvas").append(renderer.domElement);
//controls
controls = new THREE.OrbitControls(camera, renderer.domElement, renderer, scene);
controls.target = new THREE.Vector3(250, 0, 0)
//axis
var axis = new THREE.AxisHelper( 30000 );
scene.add(axis);
//geometry
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh( geometry, material );
cube.position.set(250, 0, 0);
scene.add( cube );
animate();
function animate() {
camera.updateProjectionMatrix();
controls.update();
TWEEN.update();
requestAnimationFrame(animate);
render();
}
function render(){
renderer.render(scene, camera);
}
//working tween to the right
$("#workingTweenToTheRight").click(function () {
var destPos = new THREE.Vector3(500, 0, 0);
var destLookAt = new THREE.Vector3(250, 0, 0);
var currentCamPos = {
x: camera.position.x,
y: camera.position.y,
z: camera.position.z
};
var destCamPos = {
x: destPos.x,
y: destPos.y,
z: destPos.z
};
var tween = new TWEEN.Tween(currentCamPos)
.to(destCamPos, 600)
.onUpdate(function () {
camera.position.set(this.x, this.y, this.z);
camera.lookAt(destLookAt);
controls.target = destLookAt;
})
.start();
});
//not working tween to top
$("#notWorkingTweenToTheTop").click(function () {
var destPos = new THREE.Vector3(0, 500, 0);
var destLookAt = new THREE.Vector3(250, 0, 0);
var currentCamPos = {
x: camera.position.x,
y: camera.position.y,
z: camera.position.z
};
var destCamPos = {
x: destPos.x,
y: destPos.y,
z: destPos.z
};
var tween = new TWEEN.Tween(currentCamPos)
.to(destCamPos, 600)
.onUpdate(function () {
camera.position.set(this.x, this.y, this.z);
camera.lookAt(destLookAt);
controls.target = destLookAt;
})
.start();
});
body { margin: 0; }
#canvas {float: left; width: 640px; height: 380px; border: 1px solid #d3d3d3 }
.button { border: 1px solid black; cursor: pointer; width: 230px; height: 20px;}
.button:hover{background: blue; color: white;}
<script src="http://sole.github.io/tween.js/build/tween.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<div id="canvas">
<div id="workingTweenToTheRight" class="button" >working tween to the right</div>
<div id="notWorkingTweenToTheTop" class="button" >not working tween to the top</div>
</div>
You need to set destPos for the "tween to the top" differently:
var destPos = new THREE.Vector3().addVectors(cylinder.position, new THREE.Vector3(0, 500, 0));