答案 0 :(得分:0)
如果希望对象相对于其他对象定位,则必须将该对象添加为引用对象的子对象。
使用Object3D.add
将子项添加到对象。
参见示例:
(function onLoad() {
var container, loader, camera, scene, renderer, controls, mesh, child;
init();
animate();
function init() {
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, -4, -1.5);
loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(camera);
window.onresize = resize;
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.x = -0.75;
directionalLight.position.y = -0.5;
directionalLight.position.z = -1;
scene.add( directionalLight );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var axis = new THREE.AxesHelper(2);
scene.add(axis);
var material = new THREE.MeshPhongMaterial({color:'#f08080'});
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
mesh = new THREE.Mesh(geometry, material);
var material2 = new THREE.MeshPhongMaterial({color:'#8080f0'});
var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
child = new THREE.Mesh(geometry2, material2);
child.position.x = 1.5;
mesh.add(child);
scene.add(mesh);
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
function animate() {
child.position.set(0, 0, 0);
child.rotateY(0.02)
child.translateX(1.5);
mesh.position.set(0, 0, 0);
mesh.rotateZ(0.01);
mesh.translateX(1.0);
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>
&#13;
答案 1 :(得分:0)
感谢Rabbid76的快速回复。它实际上有所帮助。
我添加了
child.rotateY(0.02);
以动画函数中的上述代码在随机轴上旋转。
我可以知道如何让儿童盒自动旋转吗?
get_value
&#13;
(function onLoad() {
var container, loader, camera, scene, renderer, controls, mesh, child;
init();
animate();
function init() {
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, -4, -1.5);
loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(camera);
window.onresize = resize;
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.x = -0.75;
directionalLight.position.y = -0.5;
directionalLight.position.z = -1;
scene.add( directionalLight );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var axis = new THREE.AxesHelper(2);
scene.add(axis);
var material = new THREE.MeshPhongMaterial({color:'#f08080'});
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
mesh = new THREE.Mesh(geometry, material);
var material2 = new THREE.MeshPhongMaterial({color:'#8080f0'});
var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
child = new THREE.Mesh(geometry2, material2);
child.position.x = 1.5;
mesh.add(child);
scene.add(mesh);
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
function animate() {
child.position.set(0, 0, 0);
child.rotateY(0.02)
child.translateX(1.5);
mesh.position.set(0, 0, 0);
mesh.rotateZ(0.01);
mesh.translateX(1.0);
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
})();
&#13;