javascript - 如何将 Timelinemax / Tween 用于移动对象?
问题描述
嗨,很棒的 Stackoverflow 伙计们,
我试图将我在 three.js 中的对象移动到某个点。据我所知,我需要使用 Tween.js。但是在教程中,我看到它导入了 Tween Js,但是当他使用 tween js 时,他使用了“timelinemax”,我认为这有点难以理解?顺便一提。
我的代码如下。
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 )
var camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.x = 40;
camera.position.y = 20;
camera.position.z = 1500;
var renderer = new THREE.WebGLRenderer();
var render = function(){
requestAnimationFrame(render);
renderer.render(scene,camera)
}
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// end template here
var coord =[{"x":300,"y":10,"z":10},{"x":20,"y":30,"z":30},{"x":30,"y":0,"z":50},
{"x":40,"y":20,"z":70},{"x":50,"y":100,"z":90},
{"x":60,"y":30,"z":110},{"x":70,"y":150,"z":90}]
var sphr
var geom
var sphrinfo=[]
function drawsphre(){
for (let i =0; i<coord.length; i++){
var mat = new THREE.MeshPhongMaterial( { flatShading: true } )
geom = new THREE.SphereGeometry( 60, 50, 50);
sphr = new THREE.Mesh( geom, mat);
console.log()
sphr.position.set(coord[i].x,coord[i].y,coord[i].z)
sphrinfo.push(sphr)
sphr.tl = new TimelineMax()
sphr.tl.to(sphr.position.set,.5,{x:100,y:204,z:300})
scene.add(sphr);
render()
}
}
drawsphre();
function movesphr(){
for (let i=0;i<coord.length;i++){
sphrinfo[i].z=10
}
}
function animate() {
}
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
// White directional light at 70% intensity shining from the top.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
scene.add( directionalLight );
我放
TimelineMax 但球体根本不动。谁能帮我解决这个问题?
最终我想做的是生成一堆具有特定 x,y,z 值的球体。并使所有球体下降到我猜z坐标为零的平面上。
我正在尝试制作动画。
提前致谢。
解决方案
补间适用于属性,但您正在尝试补间sphr.position.set
这是一个函数。
您应该只补间sphr.position
.
下面是一个演示,检查animateBox
功能。
var camera, scene, renderer, mesh, material;
init();
renderloop();
// Start the box animating.
animateBox();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 800;
// Create scene.
scene = new THREE.Scene();
// Create material
material = new THREE.MeshPhongMaterial();
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// Create directional light and add to scene.
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Add listener for window resize.
window.addEventListener('resize', onWindowResize, false);
}
function renderloop() {
requestAnimationFrame(renderloop);
renderer.render(scene, camera);
}
function animateBox() {
// just use tweens.
//gsap.to(mesh.position, {x: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
//gsap.to(mesh.position, {y: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
//gsap.to(mesh.position, {z: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
// use a timeline (and call this function again on complete).
// This uses GSAP V3
var timeline = gsap.timeline({onComplete: animateBox});
// animate mesh.position.x,
// a random number between -300 and 300,
// for 2 seconds.
timeline.to(
mesh.position,
{x: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
0
);
// animate mesh.position.y
timeline.to(
mesh.position,
{y: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
0
);
// animate mesh.position.z
timeline.to(
mesh.position,
{z: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
0
);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
body {
padding: 0;
margin: 0;
}
canvas {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/gsap.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
推荐阅读
- android - 使用 MVVM 架构的活动共享元素转换
- excel - Angular 6:更改模板生成页面的 Content-Type
- qt - 将图标添加到 QTabWidget 栏
- python - 读取未格式化的 xml 并再次格式化导出?
- javascript - Vue路由器翻译url
- c# - 如何将匿名类型的数据项转换为由其相同类型组成的类
- extjs - ExtJS-4:覆盖方法“onMouseDown”不起作用
- python - 我应该如何使用 Optional 类型提示?
- google-maps - 超出 Google Maps API 请求配额
- eloquent - 雄辩的如何返回null