您好，我正在学习 webGL 和 javascript。
我已经制作了这个 three.js webGL 场景的东西，实际上我想到了......它们是同一个对象
球与 3d 对象的其余部分“连接”在一起，因此我将在 blender 中单独制作另一个球体。
假设我有一个 ball.js 和结构的其余部分，tribunal.js
在这种情况下，我将如何沿着 3D 环境调整 ball.js？
可能就像在结构周围的一个圆圈中。不断循环。
还有代码的粘贴站:
http://paste.ubuntu.com/6549663/
<!doctype html>
<html lang="en">
<head>
<title>My 3D webGL experiment</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.position.set(90,80,0);
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColorHex(0xB5DBDB, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xf44fff);
light.position.set(200,200,200);
scene.add(light);
// Load in the mesh and add it to the scene.
var loader = new THREE.JSONLoader();
loader.load( "models/tribunal.js", function(geometry){
var material = new THREE.MeshLambertMaterial({color: 0xCC0000});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
// Renders the scene and updates the render as needed.
function animate() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>
最佳答案
在 THREE.js 中，对象的任何移动都可以通过更改其属性来实现:位置、旋转和/或缩放。这些属性不是简单的数字，因此更改它们以满足您的需要通常需要使用内置函数来确保正确处理更改。例如，网格的位置被定义为 Vector，可以使用 set() 函数更改它，如下所示:
mesh.position.set( 0, 0, 0 ); // Standard [ x, y, z ] coordinate system
文档和代码中描述了很多其他方法来更改 Vector 中的值。将对象的属性视为对象本身，并熟悉可用于这些对象及其父对象的方法。
回答您的问题:在一段时间内连续移动对象需要在 animate() 函数中添加更多代码。每次调用 animate() 函数时，以下代码都会将网格沿 x 轴正方向移动 1 个单位:
mesh.position.translateX( 1 );
提示:
移动的类型很多，但它们大多是位置、旋转和/或缩放的组合。
请务必记住，子对象会受到父对象的影响。如果网格 B 附加到网格 A，则应用到网格 A 的移动也会移动网格 B。
在 animate() 循环中对对象的变量引用必须是全局的，这样 animate() 循环才能知道您在谈论什么对象。
位置、比例甚至旋转的变化可以快速将对象移出相机的视锥体(或视野)。
使用 OrbitControls.js 和 console.log() 来帮助调试动画。
关于javascript - three.js 的新手，如何在 three.js 中为这个球制作动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20487714/